tag:blogger.com,1999:blog-48286099649613290382024-03-13T20:51:18.467+07:00Dong Nguyen"Thiên hạ vạn vật sinh ư hữu, hữu sinh ư vô"Dong Nguyenhttp://www.blogger.com/profile/08315900287977325135noreply@blogger.comBlogger68125tag:blogger.com,1999:blog-4828609964961329038.post-89939106789377028522015-12-29T22:05:00.000+07:002015-12-29T22:05:08.643+07:00Tại sao phải quan tâm đến coding style?<div style="background-color: white;">
<span style="color: #274e13; font-family: arial, sans-serif; font-size: 12.8px;"><a href="https://twitter.com/slicknet">Nicholas C. Zakas</a> là một trong các đại tôn sư JavaScript và front end hiện nay. Anh từng làm ở một số công ty nhỏ trước khi đến Yahoo! vào n</span><span style="color: #274e13; font-family: arial, sans-serif; font-size: 12.8px;">ăm </span><span style="color: #274e13; font-family: arial, sans-serif; font-size: 12.8px;">2006. Ở đó, anh đóng vai trò Senior Front End Engineer rồi Principal Front End Engineer. Có thể xem Nicholas như thế hệ đàn em xuất sắc của Douglas Crockford, một bậc thầy JavaScript vĩ đại khác. Cả hai đều hoạt động sôi nổi, có đóng góp rất lớn trong việc hình thành thế giới front-end sống động như ngày nay. Hiện anh đang làm ở Box.com trong vai trò Principal Architect. Ngoài ra anh cũng tham gia biên soạn đặc tả EcmaScript, viết phần mềm và sách, cuốn mới nhất của anh có tiêu đề "</span><a href="https://leanpub.com/understandinges6/read" style="color: #1155cc; font-family: arial, sans-serif; font-size: 12.8px;" target="_blank">Understanding ECMAScript 6</a><span style="color: #274e13; font-family: arial, sans-serif;"><span style="font-size: 12.8px;">", đang là sách gối đầu giường của nhiều developers, trong đó có tôi.</span></span></div>
<div style="background-color: white; color: #222222; font-family: arial, sans-serif; font-size: 12.8px;">
<span style="color: #274e13;"><br /></span></div>
<div style="background-color: white; color: #222222; font-family: arial, sans-serif; font-size: 12.8px;">
<span style="color: #274e13;">Năm 2011, Yahoo! YUI share 1 seminar chủ đề "<a href="https://youtu.be/vXjVFPosQHw" style="color: #1155cc;" target="_blank">Scalable JavaScript Application Architecture</a>" của Nicholas trên YouTube và đã tạo thành hiệu ứng dữ dội, hàng loạt JavaScript framework mới ra đời hoặc được kiến trúc lại, bao gồm cả Angular, Ember và Backbone. Sau đó, chính anh cũng xây dựng <a href="http://t3js.org/" style="color: #1155cc;" target="_blank">T3.js</a>, một framework nhỏ gọn, dùng cho hệ thống ứng dụng ở Box.</span></div>
<div style="background-color: white; color: #222222; font-family: arial, sans-serif; font-size: 12.8px;">
<span style="color: #274e13;"><br /></span></div>
<div style="background-color: white; color: #222222; font-family: arial, sans-serif; font-size: 12.8px;">
<span style="color: #274e13;">Năm 2012, Nicholas viết "Why Coding Style Matters" trên Smashing Magazine. Bài viết nhấn mạnh tầm quan trọng của coding theo convension. Theo anh, coding style không chỉ thể hiện tính chuyên nghiệp và tăng cường khả năng debug, mà còn ẩn chứa 2 yếu tố rất nhân văn khác: <b>sự quan tâm đến người khác</b> và <b>trân trọng tương lai của chính mình</b>.</span></div>
<div style="background-color: white; color: #222222; font-family: arial, sans-serif; font-size: 12.8px;">
<span style="color: #274e13;"><br /></span></div>
<div style="background-color: white;">
<span style="color: #274e13;"><span style="color: #222222; font-family: arial, sans-serif;"><span style="font-size: 12.8px;">Nay tạm dịch lại, m</span></span><span style="font-family: arial, sans-serif;"><span style="font-size: 12.8px;">ời các bạn</span></span><span style="color: #222222; font-family: arial, sans-serif;"><span style="font-size: 12.8px;"> xem chơi :)</span></span></span></div>
<div style="background-color: white; color: #222222; font-family: arial, sans-serif; font-size: 12.8px;">
<br /></div>
<div style="background-color: white; color: #222222; font-family: arial, sans-serif; font-size: 12.8px;">
<br /></div>
<div style="background-color: white; color: #222222; font-family: arial, sans-serif; font-size: 12.8px;">
<br /></div>
<div style="background-color: white; color: #222222; font-family: arial, sans-serif; font-size: 12.8px;">
<span style="font-size: x-large;">Tại sao coding style quan trọng?</span></div>
<div style="background-color: white; color: #222222; font-family: arial, sans-serif; font-size: 12.8px;">
<br /></div>
<div style="background-color: white; color: #222222; font-family: arial, sans-serif; font-size: 12.8px;">
Thời còn đi học, tôi có một ông thầy rất nghiêm khắc tên là Maxey. Ông dạy các môn phức tạp như cấu trúc dữ liệu và kiến trúc máy tính. Ông giảng hay, dễ hiểu, nhưng cũng đặc biệt khó tính. Ông không chỉ dò code xem chạy đúng không mà còn bắt lỗi trình bày code nữa.<br /><br />Nếu bạn quên comment vào những chỗ cần thiết, thậm chí nếu bạn gõ sai một hai từ trong comment, ông sẽ trừ điểm. Nếu code của bạn "bẩn" - so với tiêu chuẩn của ông ấy - ông ấy cũng trừ điểm. Thông điệp rất rõ ràng: chất lượng code không chỉ nằm ở chỗ nó chạy ra sao, mà còn phụ thuộc cách bạn trình bày nó nữa. Đó là những trải nghiệm đầu tiên của tôi về coding style.<br /><br /><br /><span style="font-size: medium;">Thế tóm lại coding style là gì?</span><br /><br />Hiểu đơn giản, coding style là nói đến việc code của bạn trông ra làm sao. Chữ "bạn" ở đây tôi muốn nhấn mạnh là chỉ chính bạn, người đang đọc bài viết này. Coding style là chuyện hết sức cá nhân và ai cũng có thói quen riêng của mình. Bạn có thể tự khám phá style của bạn bằng cách xem lại những đoạn code mà bạn đã viết trước đây khi chưa học theo bất cứ style guide nào. Mỗi người có phong cách khác nhau vì cách họ tiếp cận các môn lập trình không hề giống nhau. Nếu bạn dùng các IDEs như Visual Studio để học code, bạn sẽ viết theo đúng cách editor đó quy định. Nếu bạn dùng các trình soạn thảo thuần văn bản, cách viết của bạn có thể tiến bộ dần theo những gì bạn thấy là dễ đọc.<br /><br />Bạn sẽ sớm nhận ra rằng, ở mỗi ngôn ngữ khác nhau, cách viết code của bạn cũng thay đổi theo những chiều hướng khác nhau. Bạn có thể làm với JavaScript một kiểu, làm với CSS một kiểu khác. Chẳng hạn, bạn cho rằng chuỗi trong JavaScript nên dùng nháy kép, trong khi chuỗi bên CSS bạn vẫn dùng nháy đơn. Đây không phải chuyện hiếm gặp vì chúng ta có xu hướng chuyển đổi ngữ cảnh khi nhảy từ ngôn ngữ ngày sang ngôn ngữ khác. Nó là một bài tập thú vị trong việc tự quan sát bản thân.<br /><br />Coding style được hình thành từ những quyết định nhỏ trong từng ngôn ngữ bạn sử dụng:<br /><br />- Khi nào cần comment và comment thế nào?<br />- Thụt đầu dòng bằng tabs hay spaces (và bao nhiêu spaces)<br />- Sử dụng white space hợp lý<br />- Đặt tên biến và hàm rõ ràng<br />- Tổ chức và gom nhóm code<br />- Các patterns nên dùng và nên tránh<br /><br />Đấy cũng chưa phải là tất cả, vì coding style có thể rất chi tiết như Google JavaScript Style Guide hay cũng có thể tổng quát hơn như jQuery Core Style Guidelines.<br /><br /><span style="font-size: medium;"><br />Đó là chuyện cá nhân</span><br /><br />Tính chất cá nhân của coding style là một thách thức khi làm việc nhóm. Nhiều khi để tránh phải tranh luận dài dòng, người ta cố gắng trì hoãn việc xây dựng style guides với lý do không muốn "ngăn cản sự sáng tạo và tự do biểu hiện." Một số người nghĩ rằng đưa ra style guide cho team là ép buộc tất cả các developers vào cùng khuôn khổ. Một số developers kịch liệt chống đối khi phải code theo style guide, họ tin rằng sẽ không làm được việc nếu có ai đó cứ chỉ bảo họ phải viết code như thế nào.<br /><br /><br />Tôi thấy giống với tình huống một ban nhạc mới thành lập. Mỗi thành viên đều tin rằng cách chơi của họ là tốt nhất và cố gắng chơi theo cách riêng của họ. Nhưng không thể có âm nhạc ra hồn được trừ khi các thành viên nhất trí với nhau về nhịp độ, phong cách và cử ra người dắt nhịp. Nghe các nhóm nhạc trong trường học biểu diễn thì biết. Khó có thể làm được gì nếu mọi người không vận hành theo cùng một cách thức.<br /><br />Đó là lý do tại sao tôi rất khuyến khích áp dụng style guide trong các nhóm phát triển phần mềm. Nếu bạn thấy khó để mọi người nhìn vấn đề theo cùng một cách thì hãy bắt đầu từ style guide. Khi mà ai cũng trình bày code giống nhau, bạn sẽ tránh được rất nhiều rắc rối tiềm ẩn.<br /><br /><span style="font-size: medium;"><br />Thân thiện: nghĩ đến người khác</span><br /><br />Giao tiếp là thứ quan trọng nhất khi làm việc nhóm. Để công việc trôi chảy thì phải tương tác với nhau thật tốt. Các developers giao tiếp chủ yếu qua source code. Chúng ta dùng code để nói chuyện với phần mềm cũng như với các developers khác.<br /><br />Cách bạn trình bày code không quan trọng đối với máy tính, nhưng lại rất quan trọng đối với các developer khác. Code viết rõ ràng thì đọc dễ hiểu hơn. Đã bao lần bạn mở source code của người khác mà việc đầu tiên là sửa lại định dạng lại theo cách của bạn? Đó là vì cách trình bày khiến bạn không hiểu được code. Khi ai đó viết code nhìn khác lạ, mọi người sẽ ngay lập tức phải phân tích một cách trực quan trước khi có thể hiểu được code đó làm gì. Khi ai đó viết code giống bạn, bạn sẽ cảm thấy dễ chịu và hiểu được chương trình một cách nhanh chóng.<br /><br /><br />Khi bắt đầu nghĩ về code như một phương tiện giao tiếp với các developer khác, cũng là lúc bạn nhận ra rằng viết code chính là một nghệ thuật. Code nên thể hiện rõ ràng mục đích của nó. Luôn nhớ rằng code mà bạn viết ra rồi sẽ được những người khác dùng lại. Bạn không chỉ tương tác với các thành viên trong team ở thời điểm hiện tại, mà còn cả những developers sẽ gia nhập sau này.<br /><br />Mới đây tôi có nhận email từ một người đang làm việc với code do tôi viết từ 10 năm trước. Tôi giật mình kinh ngạc: code của mình vẫn còn được dùng trong sản phẩm. Anh ta cảm thấy thôi thúc phải mail cho tôi để bày tỏ rằng anh rất vui khi được làm việc với code của tôi. Tôi mỉm cười. Người đồng đội tương lai này thực sự tán thưởng coding style mà tôi đã theo đuổi.<br /><br /><br /><span style="font-size: medium;">Thận trọng: nhìn xa phía trước</span><br /><br />Trong cuộc sống, phải tự biết mình. Trong coding cũng vậy. Dẫu sao bạn sẽ không bao giờ biết mình đủ rõ để nhớ lại những gì bạn nghĩ khi viết ra mỗi dòng code. Hầu hết developers đều trải qua những lúc nhìn lại code cũ của mình mà không hiểu tại sao viết thế. Không phải do trí nhớ bạn kém, chỉ là bạn đã phải giải quyết quá nhiều chi tiết nhỏ và không thể nào ghi nhớ từng chút một.<br /><br />Nhưng nếu bạn viết code dựa trên một style guide, các thông tin đó sẽ được gửi gắm vào trong bản thân mỗi đoạn code. Chỉ cần bạn biết rõ khi nào và ở đâu nên để comments, patterns nào nên/không nên sử dụng, bạn đã tạo ra ở đó một con đường mòn cho tương lai khi cần quay lại tìm kiếm ý nghĩa của code.<br /><br />Không gì thú vị hơn khi mở ra một đoạn code xưa cũ mà vẫn thấy nó như vừa được viết hôm qua. Bạn sẽ bắt nhịp nhanh chóng chứ không phải mất hàng giờ nghiền ngẫm lại logic của những đoạn code ấy.<br /><br />Chris Epstein từng khuyên: “Hãy ân cần với tương lai của chính bạn.”<br /><br /><span style="font-size: medium;"><br />Sáng suốt: nhận biết lỗi nhanh chóng</span><br /><br />Một trong những lý do phải áp dụng style guide là nó khiến cho lỗi trở nên dễ thấy. Style guides giúp developers thích nghi với các patterns nào đó. Và khi bạn đã quen với những patterns ấy rồi thì chỉ cần nhìn qua code một cái, bạn sẽ phát hiện ngay ra các patterns khác lạ. Những patterns khác lạ này có thể không gây lỗi, nhưng chúng đòi hỏi phải xem xét thật kỹ để đảm bảo không có gì sai.<br /><br />Chẳng hạn như với cấu trúc "switch" trong JavaScript. Có một lỗi khá phổ biến là cho phép thoát khỏi case để đi vào case khác, ví dụ:<br /><br /><blockquote class="gmail_quote" style="border-left-color: rgb(204, 204, 204); border-left-style: solid; border-left-width: 1px; margin: 0px 0px 0px 0.8ex; padding-left: 1ex;">
<span style="font-family: monospace, monospace;">switch(value) {<br /> case 1:<br /> doSomething();<br /> case 2:<br /> doSomethingElse();<br /> break;<br /> default:<br /> doDefaultThing();<br />}</span></blockquote>
<br />Nếu value là 1 thì chương trình sẽ đi qua case thứ nhất rồi nhảy vào case thứ 2. Nghĩa là cả doSomething và doSomethingElse cùng được gọi.<br /><br />Câu hỏi đặt ra ở đây là: có lỗi gì không? Rất có thể developer quên một câu lệnh "break" trong case thứ nhất, nhưng cũng có khả năng developer cố ý cho kịch bản chạy cả 2 cases nếu value bằng 1. Chưa thể khẳng định được điều gì qua đoạn code trên.<br /><br />Bây giờ giả sử bạn có JavaScript style guide nói như sau:<br /><br />“Tất cả các cases trong câu lệnh switch phải kết thúc bằng break, throw, return, hay một comments chỉ dẫn một fall-through”.<br /><br />Với style guide như thế, chúng ta xác định đây là một lỗi trình bày, tức là có thể có lỗi logic. Nếu chủ ý bạn muốn chương trình đi qua case thứ nhất, thì nên code như sau:<br /><br /><blockquote class="gmail_quote" style="border-left-color: rgb(204, 204, 204); border-left-style: solid; border-left-width: 1px; margin: 0px 0px 0px 0.8ex; padding-left: 1ex;">
<span style="font-family: monospace, monospace;">switch(value) {<br /> case 1:<br /> doSomething();<br /> //falls through<br /> case 2:<br /> doSomethingElse();<br /> break;<br /> default:<br /> doDefaultThing();<br />}</span></blockquote>
<span style="font-family: monospace, monospace;"><br /></span><br />Nếu bạn muốn thoát khỏi switch ở case đầu tiên, nó nên kết thúc bằng "break". Ngoài ra, code đầu tiên không đúng với style guide, nghĩa là bạn cần kiểm tra thật kỹ kịch bản. Với thói quen này, bug sẽ được ngăn chặn rất sớm. Cái<br /><br />Style guide giúp chỉ ra những đoạn code viết bừa bãi. Chỗ lợi hại nhất của style guides là: bằng cách định nghĩa thế nào là trình bày code đúng, bạn sẽ dễ dàng hơn trong việc nhận diện code sai và do đó, cả những lỗi tiềm ẩn trước khi chúng xảy ra.</div>
<div style="background-color: white; color: #222222; font-family: arial, sans-serif; font-size: 12.8px;">
<br /><br /><span style="font-size: medium;">Càng tỉ mỉ càng tốt</span><br /><br />Khi giúp khách hàng xây dựng style guide, tôi thường được hỏi những chi tiết vụn vặt có thực sự quan trọng không? Câu trả lời là đúng và không đúng. Đúng vì cách trình bày code không thực sự quan trọng với máy tính. Không đúng vì những chi tiết nhỏ ấy sẽ giúp ích rất nhiều cho các developer phải bảo trì code. Hãy nghĩ thế này: nếu trong sách có một ký tự lỗi, bạn vẫn hiểu và không mất đi hứng thú với câu chuyện. Nhưng nếu có quá nhiều lỗi, bạn sẽ nhanh chóng cảm thấy khó chịu khi cứ phải giải mã ý tứ của tác giả.<br /><br />Coding style giống hệt như vậy. Các bạn đang định nghĩa cách phát âm, quy tắc ngữ pháp cho mọi người theo. Style guide của các bạn có thể khá dài và chi tiết, không sao cả. Theo kinh nghiệm của tôi, một khi các nhóm bắt đầu code theo style guides, họ có xu hướng đi vào chi tiết vì điều đó giúp họ hiểu code và tổ chức code ngăn nắp hơn.<br /><br />Tôi chưa từng thấy style guide nào quá mức chi tiết, nhưng tôi đã thấy một số được làm quá sơ sài. Cho nên điều quan trọng là nhóm phát triển style guide phải phối hợp chặt chẽ, thảo luận kỹ càng xem cái gì cần nhất, để đưa ra một nền tảng tốt cho style guide. Đừng quên rằng style guide là tư liệu sống. Nó sẽ tiếp tục được nâng cấp trong quá trình làm việc tập thể mọi người ngày càng hiểu nhau hơn và nắm rõ công việc hơn.<br /><br /><br /><span style="font-size: medium;">Công cụ hỗ trợ</span><br /><br />Đừng ngại dùng các tools bắt bạn phải tuân thủ coding style. Web developers có rất nhiều tools hỗ trợ kiểm tra coding style, từ command line chạy khi build, đến các plugins gắn vào text editors. Đây là vài công cụ bạn có thể tham khảo:<br style="background-color: #fafafa; color: rgba(0, 0, 0, 0.870588); font-family: 'Roboto Slab', 'Times New Roman', serif; font-size: 14px; line-height: 19px; white-space: pre-wrap;" /><br style="background-color: #fafafa; color: rgba(0, 0, 0, 0.870588); font-family: 'Roboto Slab', 'Times New Roman', serif; font-size: 14px; line-height: 19px; white-space: pre-wrap;" /><a href="http://eclipseone.wordpress.com/2009/12/13/automatically-format-and-cleanup-code-every-time-you-save/" style="background-image: initial; background-repeat: initial; border-bottom-color: rgba(0, 0, 0, 0.0980392); border-bottom-style: solid; border-bottom-width: 0.08em; color: #41b7d8; font-family: 'Proxima Nova Regular', 'Segoe UI', Roboto, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif; line-height: 27.9px; margin: 0px; padding: 0px 0px 0.08em; text-decoration: none; vertical-align: baseline;" target="_blank"><b>Eclipse Code Formatter</b></a><br style="background-color: #fafafa; color: rgba(0, 0, 0, 0.870588); font-family: 'Roboto Slab', 'Times New Roman', serif; font-size: 14px; line-height: 19px; white-space: pre-wrap;" /><span style="background-color: #fafafa; color: rgba(0, 0, 0, 0.870588); font-family: 'Roboto Slab', 'Times New Roman', serif; font-size: 14px; line-height: 19px; white-space: pre-wrap;">Eclipse IDE có một tool tích hợp sẵn hỗ trợ định dạng code.</span><br style="background-color: #fafafa; color: rgba(0, 0, 0, 0.870588); font-family: 'Roboto Slab', 'Times New Roman', serif; font-size: 14px; line-height: 19px; white-space: pre-wrap;" /><a href="http://jshint.com/" style="background-image: initial; background-repeat: initial; border-bottom-color: rgba(0, 0, 0, 0.0980392); border-bottom-style: solid; border-bottom-width: 0.08em; color: #41b7d8; font-family: 'Proxima Nova Regular', 'Segoe UI', Roboto, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif; line-height: 27.9px; margin: 0px; padding: 0px 0px 0.08em; text-decoration: none; vertical-align: baseline;" target="_blank"><b>JSHint</b></a><br style="background-color: #fafafa; color: rgba(0, 0, 0, 0.870588); font-family: 'Roboto Slab', 'Times New Roman', serif; font-size: 14px; line-height: 19px; white-space: pre-wrap;" /><span style="background-color: #fafafa; color: rgba(0, 0, 0, 0.870588); font-family: 'Roboto Slab', 'Times New Roman', serif; font-size: 14px; line-height: 19px; white-space: pre-wrap;">Công cụ kiểm tra chất lượng code và trình bày code JavaScript.</span><br style="background-color: #fafafa; color: rgba(0, 0, 0, 0.870588); font-family: 'Roboto Slab', 'Times New Roman', serif; font-size: 14px; line-height: 19px; white-space: pre-wrap;" /><a href="http://csslint.net/" style="background-image: initial; background-repeat: initial; border-bottom-color: rgba(0, 0, 0, 0.0980392); border-bottom-style: solid; border-bottom-width: 0.08em; color: #41b7d8; font-family: 'Proxima Nova Regular', 'Segoe UI', Roboto, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif; line-height: 27.9px; margin: 0px; padding: 0px 0px 0.08em; vertical-align: baseline;" target="_blank"><b>CSS Lint</b></a><br style="background-color: #fafafa; color: rgba(0, 0, 0, 0.870588); font-family: 'Roboto Slab', 'Times New Roman', serif; font-size: 14px; line-height: 19px; white-space: pre-wrap;" /><span style="background-color: #fafafa; color: rgba(0, 0, 0, 0.870588); font-family: 'Roboto Slab', 'Times New Roman', serif; font-size: 14px; line-height: 19px; white-space: pre-wrap;">Công cụ kiểm tra chất lượng và trình bày CSS do </span><a href="http://stubbornella.org/" style="background-image: initial; background-repeat: initial; border-bottom-color: rgba(0, 0, 0, 0.0980392); border-bottom-style: solid; border-bottom-width: 0.08em; color: #41b7d8; font-family: 'Proxima Nova Regular', 'Segoe UI', Roboto, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif; line-height: 27.9px; margin: 0px; padding: 0px 0px 0.08em; text-decoration: none; vertical-align: baseline;" target="_blank">Nicole Sullivan</a><span style="background-color: #fafafa; color: rgba(0, 0, 0, 0.870588); font-family: 'Roboto Slab', 'Times New Roman', serif; font-size: 14px; line-height: 19px; white-space: pre-wrap;"> và tôi xây dựng.</span><br style="background-color: #fafafa; color: rgba(0, 0, 0, 0.870588); font-family: 'Roboto Slab', 'Times New Roman', serif; font-size: 14px; line-height: 19px; white-space: pre-wrap;" /><a href="http://checkstyle.sourceforge.net/" style="background-image: initial; background-repeat: initial; border-bottom-color: rgba(0, 0, 0, 0.0980392); border-bottom-style: solid; border-bottom-width: 0.08em; color: #41b7d8; font-family: 'Proxima Nova Regular', 'Segoe UI', Roboto, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif; line-height: 27.9px; margin: 0px; padding: 0px 0px 0.08em; text-decoration: none; vertical-align: baseline;" target="_blank"><b>Checkstyle</b></a><br style="background-color: #fafafa; color: rgba(0, 0, 0, 0.870588); font-family: 'Roboto Slab', 'Times New Roman', serif; font-size: 14px; line-height: 19px; white-space: pre-wrap;" />Một công cụ kiểm tra style guidelines trong Java code, dùng được cho nhiều ngôn ngữ khác.<br /><br />Bạn có thể chia sẻ trong team các files cấu hình kiểm tra style guide. Ngoài ra, làm các công cụ tích hợp vào hệ thống continuous integration của bạn cũng là ý tưởng tốt.<br /><br /><br /><br /><span style="font-size: medium;">Kết luận</span><br /><br />Style guides là phần quan trọng khi viết code chuyên nghiệp. Dù bạn viết JavaScript hay CSS hay ngôn ngữ nào cũng vậy, cách trình bày code là phần không thể thiếu khi đánh giá chất lượng code. Nếu team hay dự án của bạn chưa có style guide, hãy bắt đầu ngay đi. Đây là một số style guides để các bạn tham khảo:<br style="background-color: #fafafa; color: rgba(0, 0, 0, 0.870588); font-family: 'Roboto Slab', 'Times New Roman', serif; font-size: 14px; line-height: 19px; white-space: pre-wrap;" /><ul style="background-image: initial; background-repeat: initial; border: 0px; color: #333333; font-family: 'Proxima Nova Regular', 'Segoe UI', Roboto, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif; margin: 0.5em 1.5em; outline: 0px; padding: 0px; vertical-align: baseline;">
<li style="background-color: initial; background-image: initial; background-repeat: initial; border: 0px; margin: 0px; outline: 0px; padding: 0.25em 0px; vertical-align: baseline;"><a href="http://docs.jquery.com/JQuery_Core_Style_Guidelines" style="background-color: initial; background-image: initial; background-repeat: initial; border-bottom-color: rgba(0, 0, 0, 0.0980392); border-bottom-style: solid; border-bottom-width: 0.08em; color: #41b7d8; margin: 0px; padding: 0px 0px 0.08em; text-decoration: none; vertical-align: baseline;" target="_blank">jQuery Core Style Guidelines</a></li>
<li style="background-color: initial; background-image: initial; background-repeat: initial; border: 0px; margin: 0px; outline: 0px; padding: 0.25em 0px; vertical-align: baseline;"><a href="http://google-styleguide.googlecode.com/svn/trunk/javascriptguide.xml" style="background: 0px 0px; border-bottom-color: rgba(0, 0, 0, 0.0980392); border-bottom-style: solid; border-bottom-width: 0.08em; color: #41b7d8; margin: 0px; padding: 0px 0px 0.08em; text-decoration: none; vertical-align: baseline;" target="_blank">Google JavaScript Style Guide</a></li>
<li style="background-color: initial; background-image: initial; background-repeat: initial; border: 0px; margin: 0px; outline: 0px; padding: 0.25em 0px; vertical-align: baseline;"><a href="http://google-styleguide.googlecode.com/svn/trunk/htmlcssguide.xml" style="background: 0px 0px; border-bottom-color: rgba(0, 0, 0, 0.0980392); border-bottom-style: solid; border-bottom-width: 0.08em; color: #41b7d8; margin: 0px; padding: 0px 0px 0.08em; text-decoration: none; vertical-align: baseline;" target="_blank">Google HTML/CSS Style Guide</a></li>
<li style="background-color: initial; background-image: initial; background-repeat: initial; border: 0px; margin: 0px; outline: 0px; padding: 0.25em 0px; vertical-align: baseline;"><a href="https://github.com/rwldrn/idiomatic.js/" style="background: 0px 0px; border-bottom-color: rgba(0, 0, 0, 0.0980392); border-bottom-style: solid; border-bottom-width: 0.08em; color: #41b7d8; margin: 0px; padding: 0px 0px 0.08em; text-decoration: none; vertical-align: baseline;" target="_blank">Principles of Writing Consistent, Idiomatic JavaScript</a></li>
<li style="background-color: initial; background-image: initial; background-repeat: initial; border: 0px; margin: 0px; outline: 0px; padding: 0.25em 0px; vertical-align: baseline;"><a href="https://github.com/necolas/idiomatic-css" style="background: 0px 0px; border-bottom-color: rgba(0, 0, 0, 0.0980392); border-bottom-style: solid; border-bottom-width: 0.08em; color: #41b7d8; margin: 0px; padding: 0px 0px 0.08em; text-decoration: none; vertical-align: baseline;" target="_blank">Principles of Writing Consistent, Idiomatic CSS</a></li>
<li style="background-color: initial; background-image: initial; background-repeat: initial; border: 0px; margin: 0px; outline: 0px; padding: 0.25em 0px; vertical-align: baseline;"><a href="https://github.com/styleguide/" style="background-color: initial; background-image: initial; background-repeat: initial; border-bottom-color: rgba(0, 0, 0, 0.0980392); border-bottom-style: solid; border-bottom-width: 0.08em; color: #41b7d8; margin: 0px; padding: 0px 0px 0.08em; text-decoration: none; vertical-align: baseline;" target="_blank">GitHub Style Guide (Ruby, HTML, CSS and JavaScript)</a></li>
</ul>
<br style="background-color: #fafafa; color: rgba(0, 0, 0, 0.870588); font-family: 'Roboto Slab', 'Times New Roman', serif; font-size: 14px; line-height: 19px; white-space: pre-wrap;" />Tất cả mọi người trong team đều nên tham gia xây dựng style guide để tránh hiểu không đúng. Vả lại, có bỏ công sức vào mới thấy trân trọng. Hãy bắt đầu bằng cách để mọi người cùng đóng góp cho sự sáng tạo chung đó.</div>
<div style="background-color: white; color: #222222; font-family: arial, sans-serif; font-size: 12.8px;">
<i><br /></i></div>
<div style="background-color: white; color: #222222; font-family: arial, sans-serif; font-size: 12.8px;">
<i><br /></i></div>
<div style="background-color: white; color: #222222; font-family: arial, sans-serif; font-size: 12.8px;">
<i>by Nicholas C. Zakas, October 25th, 2012, Smashsing Margazine</i></div>
<div style="background-color: white; color: #222222; font-family: arial, sans-serif; font-size: 12.8px;">
<br /></div>
<div style="background-color: white; color: #222222; font-family: arial, sans-serif; font-size: 12.8px;">
Link gốc: <a href="http://www.smashingmagazine.com/2012/10/why-coding-style-matters/" style="color: #1155cc;" target="_blank">http://www.<wbr></wbr>smashingmagazine.com/2012/10/<wbr></wbr>why-coding-style-matters/</a></div>
<div style="background-color: white; color: #222222; font-family: arial, sans-serif; font-size: 12.8px;">
<br /></div>
<div style="background-color: white; color: #222222; font-family: arial, sans-serif; font-size: 12.8px;">
<br /></div>
<div style="background-color: white; color: #222222; font-family: arial, sans-serif; font-size: 12.8px;">
* Một năm sau bài viết này, Nicholas quyết định viết <a href="http://eslint.org/" style="color: #1155cc;" target="_blank">ESLint</a>, và cũng có chia sẻ tại đây: <a href="http://www.smashingmagazine.com/2015/09/eslint-the-next-generation-javascript-linter/" style="color: #1155cc;" target="_blank">ESLint: The Next-Generation JavaScript Linter</a></div>
Dong Nguyenhttp://www.blogger.com/profile/08315900287977325135noreply@blogger.comtag:blogger.com,1999:blog-4828609964961329038.post-18346705931612109622015-10-14T23:15:00.001+07:002015-10-14T23:35:38.267+07:00Krishnamurty nói về Tự doDạo trước mình rất thích triết học, cũng tìm hiểu được chút ý tưởng của các cụ Aristote, Platon, Spencer, Kant… bên Tây, Khổng, Lão, Trang, Hàn… bên Tàu, lại có thói quen dẫn lời các cụ ấy coi như chân lý, mãi đến khi gặp được Krishnamurty thì mới nhận ra mọi thứ chủ thuyết trên đời đều không bằng cái tự bản thân ta thức ngộ được.<br />
<br />
Thế giới quan của Krishnamurty có thể gọi là một dạng “triết học phi triết học” vì ông không đề xướng bất cứ học thuyết nào, chỉ lấy cái Ngã tâm linh trong Hiện tại mà đối diện với ngoại giới. Một khi loại bỏ được các giáo điều, định kiến, võ đoán… thì sẽ cảm nhận được ngoại giới bằng sự Hồn nhiên, Vô tư nhất của Trí tuệ.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-dzlHPHUy_Sk/Vh6AJ6xidaI/AAAAAAAAIc0/QcwKHZuUJJE/s1600/Krishnamurti.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="http://2.bp.blogspot.com/-dzlHPHUy_Sk/Vh6AJ6xidaI/AAAAAAAAIc0/QcwKHZuUJJE/s320/Krishnamurti.jpg" width="316" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<i>Jiddu Krishnamurti</i></div>
<br />
<br />
Trong video dài hơn 30 phút dưới đây sẽ có khoảng 6 phút đầu giới thiệu qua về cuộc đời Krishnamurty, tiếp đó là một số buổi nói chuyện ông đề cập đến vấn đề tự do.<br />
<br />
Tự do, chúng ta thường hiểu là được tùy ý làm cái mình muốn, không bị ai ngăn trở, cấm đoán. Một con người tự do là một con người có thể sống bất cứ lối sống nào anh ta muốn, nói bất cứ điều gì anh ta thích. Một đất nước tự do là một đất nước không lệ thuộc thế lực nào và có đủ sức mạnh để ban phát tự do cho mỗi công dân của nó. <br />
<br />
Nhưng trong quan điểm của Krishnamurty thì đó chỉ là lớp vỏ ngoài thô thiển của khái niệm tự do. Ông hướng đến một khái niệm mang tính tâm linh nhiều hơn, một sự tự do từ bên trong, sự tự do chân thật hình thành bởi thấu hiểu và minh triết.<br />
<br />
Hình dung một tên cướp bị bắt giam ngồi trong tù nhớ lại thời vang bóng, khao khát gặp lại huynh đệ cũ, ngồi bên nhau chén tạc chén thù, cưỡi xe phân khối lớn chạy đua với cảnh sát… Tức là trong trí óc hắn có hai thế giới đối lập. Một nơi muốn làm gì thì làm, một nơi bị quản thúc mọi mặt. Khi hắn đặt 2 thế giới cạnh nhau và so sánh, hắn sẽ thấy rõ một bên là tù túng, bức bách, bên kia mới là khoái hoạt, vui sướng. Và do vậy, hắn bị những cảm xúc tiêu cực vây bủa, hành hạ, từ đó tạo ra nuối tiếc, đau khổ, uất hận… Nhưng nếu hắn đột nhiên thức ngộ, đột nhiên nhận ra ở trong khoảnh khắc này, ở nơi đây, nhà giam này là thế giới của hắn, nơi hắn đang thuộc về, nơi hắn tồn tại, hít thở và suy nghĩ. Hắn có thể nảy sinh những cảm nhận đặc biệt khác.<br />
<br />
Nếu chỉ dừng ở bề ngoài khái niệm tự do thì không ai trong cõi đời này thực sự tự do. Chúng ta phụ thuộc các quan hệ xã hội, chịu các quy luật tự nhiên, suy nghĩ của chúng ta bị nô lệ bởi tầng tầng lớp lớp kiến thức, kinh nghiệm đến từ người khác. Chúng ta luôn cảm thấy các rào cản và mong muốn bứt phá để đạt đến tự do. Nhưng tất cả sẽ là vô nghĩa nếu chúng ta không tìm thấy tự do từ nội tâm của chính mình.<br />
<br />
Mời các bạn cùng xem và suy ngẫm:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<iframe allowfullscreen="" class="YOUTUBE-iframe-video" data-thumbnail-src="https://i.ytimg.com/vi/2eAs6rCZuy4/0.jpg" frameborder="0" height="266" src="https://www.youtube.com/embed/2eAs6rCZuy4?feature=player_embedded" width="320"></iframe></div>
<br />Dong Nguyenhttp://www.blogger.com/profile/08315900287977325135noreply@blogger.comtag:blogger.com,1999:blog-4828609964961329038.post-87895770666788862812015-05-15T21:57:00.000+07:002015-10-14T23:53:06.181+07:00Chuyện kể về các trình duyệt webMicrosoft đã quyết định dùng tên Microsoft Edge cho Project Spartan. IE, kẻ thống trị một thời xem như đã chết. Đây là lúc chúng ta nên dành đôi phút nhìn lại lịch sử WWW và mấy cuộc đại chiến trình duyệt trong 25 năm qua. Rất nhiều điều thú vị :)<br />
<br />
<img alt="Web browsers" src="http://i.imgur.com/CDGmUys.jpg" title="" /><br />
<h3 id="sự-khởi-đầu-của-web">
Sự khởi đầu của web</h3>
Web, hay World Wide Web, hay WWW, được Sir Timothy John “Tim” Berners-Lee, một nhà khoa học máy tính người Anh làm việc ở CERN, sáng tạo ra vào năm 1989. Bạn nào từng đọc “<a href="http://books.google.com.vn/books/about/Angels_And_Demons.html?id=d5xgYw4Ts0gC">Thiên thần và Ác quỷ</a>” của Dan Brown chắc hẳn cũng đã nghe tới CERN – Tổ chức Nghiên cứu Nguyên tử Châu Âu. Chữ viết tắt CERN là do tiếng Pháp: “Conseil Européen pour la Recherche Nucléaire”.<br />
<br />
Theo định nghĩa hàn lâm, web là một hệ thống thông tin của những văn bản được liên kết lẫn nhau và có thể truy cập thông qua môi trường internet.<br />
<br />
<br />
<div style="text-align: center;">
<img alt="Tim Berners-Lee" src="http://i.imgur.com/oX0Atl1.jpg" title="" /></div>
<br />
<br />
Để truy cập và đọc những “văn bản được liên kết lẫn nhau” đó, Tim viết ra một phần mềm gọi là trình duyệt web. Thế là năm 1990, web browser đầu tiên của thế giới ra đời với cái tên là WorldWideWeb mà sau đó ít lâu được đổi thành Nexus để tránh lẫn lộn với khái niệm WWW ở trên.<br />
<br />
<div style="text-align: center;">
<img alt="Nexus - Trình duyệt web đầu tiên" src="http://i.imgur.com/Y3gL7vD.jpg" title="" /></div>
<div style="text-align: center;">
<br /></div>
<div style="text-align: center;">
<br /></div>
Từ đó cho đến 1993 cũng xuất hiện thêm một vài trình duyệt web khác như Line Mode Browser, ViolaWWW, Erwise, MidasWWW, MacWWW, Cello, Arena, Lynx, tkWWW… nhưng không cái nào gây được nhiều dấu ấn.<br />
<br />
Bấy giờ Marc Andreessen vẫn đang là sinh viên và làm trợ lý bán thời gian cho NCSA thuộc đại học Illinois.<br />
<br />
<br />
<div style="text-align: center;">
<img alt="Marc Andreessen" src="http://i.imgur.com/oWjEo4O.png" title="" /></div>
<br />
<h3 id="marc-andreesen-và-cuộc-phân-tranh-của-bộ-tộc-mosaic">
Marc Andreesen và cuộc phân tranh của bộ tộc Mosaic</h3>
Công việc ở NCSA tạo cho Marc cơ hội tiếp cận thế giới web mà rất ít người có được. Anh thấy rằng các trình duyệt web lúc ấy vừa nghèo chức năng vừa khó sử dụng. Vì thế anh quyết định viết ra một browser hỗ trợ tốt hơn, thân thiện với người dùng hơn, có giao diện đồ họa trực quan hơn.<br />
Năm 1992, Marc chiêu mộ thêm Eric Bina – cũng là nhân viên của NCSA – để cùng anh thực hiện ý định. Cả hai bắt đầu cày ngày cày đêm. Eric sau này kể lại rằng họ thường làm việc 3 hay 4 ngày liên tục, rồi nghỉ một ngày! Sản phẩm được đặt tên là Mosaic.<br />
<br />
Đầu năm 1993, NCSA cho download Mosaic từ máy chủ của họ. Trình duyệt này lập tức trở nên phổ biến.<br />
<br />
<br />
<div style="text-align: center;">
<img alt="NCSA Mosaic" src="http://i.imgur.com/icTPuj3.jpg" title="" /></div>
<br />
Mosaic là trình duyệt web đầu tiên có giao diện đồ họa hoàn chỉnh, lần đầu tiên hỗ trợ các giao thức FTP, gopher… mà về sau rất quen thuộc. Một số HTML tags mới như CENTER, IMG… cũng được thêm vào. Đặc biệt, với tag IMG, lần đầu tiên các hình ảnh được hiển thị ngay trong trang web.<br />
<br />
Một sáng tạo quan trọng khác của Mosaic là hyperlink. Trước kia các liên kết trên web có những con số tham chiếu như kiểu danh mục tham chiếu trong các tài liệu hàn lâm. Người ta phải gõ chúng để đi tới nội dung ở trang đích. Mosaic xử lý hyperlink giống như các trình duyệt ngày nay, cho phép user chỉ cần click là tới.<br />
<br />
Vai trò của Mosaic trong lịch sử WWW quan trọng đến mức người ta có thể chia internet ra 2 thời kỳ, trước Mosaic và sau Mosaic. Nhưng khi Mosaic được vinh danh thì NCSA hầu như lãng quên công sức của Marc và cộng sự. Vì vậy mà sau đó anh rời bỏ NCSA để bước vào thung lũng Silicon.<br />
<br />
Trong 3 ngày 25-26-27 của tháng 5, hội nghị World Wide Web lần thứ nhất được tổ chức ở Geneva, Thụy Sĩ. Cùng thời điểm, Spyglass, Inc. mua được giấy phép sử dụng mã nguồn NSCA Mosaic và cho ra đời web browser của họ lấy tên là Spyglass Mosaic. Tuy vậy, các tác giả của Spyglass chỉ dùng lại rất ít mã nguồn Mosaic.<br />
<br />
Mùa hè năm 1994, Thomas Reardon của Microsoft khởi động dự án Internet Explorer, dựa trên source code Spyglass Mosaic. Team của Thomas có 5 hoặc 6 người. Đến 16/8/1994 thì release được phiên bản 1.0, đưa Microsoft chính thức nhập cuộc.<br />
<br />
<div style="text-align: center;">
<img alt="Internet Explorer 1.0" src="http://i.imgur.com/HDu1VJI.jpg" title="" /></div>
<div style="text-align: center;">
<br /></div>
Ở Silicon Valley, Marc gặp lại James Henry Clark, founder của Silicon Graphics., Inc. Họ đã quen nhau từ 1 năm trước. Cả hai tính chuyện lập ra một công ty start-up hoạt động trong lĩnh vực internet. James có tiền và quan hệ rộng. Marc có nhiều kinh nghiệm chuyên môn. Vậy là giữa năm 1994, Mosaic Communications Corporation được thành lập ở Mountain View, California. Marc lôi kéo thêm một số bạn bè cũ ở NSCA về công ty mới và bắt tay vào làm một web browser khác tốt hơn Mosaic.<br />
<br />
Họ phải xây dựng mọi thứ từ đầu vì NSCA Mosaic được phát triển bằng tiền của trường đại học, không thể dùng lại.<br />
<br />
Vẫn với tinh thần làm việc không biết mệt mỏi, nhóm thường code với nhau 48 giờ liên tiếp. Cứ như thế, vào ngày 13/10/1994, phiên bản beta đầu tiên của Mosaic Netscape đã chính thức được release cho người dùng download.<br />
<br />
<div style="text-align: center;">
<img alt="Mosaic Netscape 0.9 on Windows XP" src="http://i.imgur.com/hafLcrs.png" title="" /></div>
<br />
Sáng tạo trong Netscape vượt xa bất cứ trình duyệt nào ở thời kỳ đó. Với Netscape, lần đầu tiên web browser biết “tải xuống đến đâu hiển thị đến đó”, các cookies và frames cũng bắt đầu được sử dụng.<br />
<br />
Song song với Netscape, nhiều trình duyệt khác cũng theo nhau xuất xưởng: IBM Web Explorer, Navipress, SlipKnot, MacWeb… Telenor, công ty viễn thông lớn nhất Na Uy thời đó cũng khởi động một dự án nghiên cứu liên quan đến trình duyệt. Nhưng những cái tên đó chỉ làm nền cho Netscape trở thành lựa chọn số một của người dùng internet.<br />
<br />
Cũng năm 1994, Håkon Wium Lie, một đồng nghiệp của Tim Berners-Lee ở CERN lần đầu tiên đề xuất khái niệm CSS. Tháng 8, Gijsber Bert Bos tạo ra một trình duyệt tên là Argo để hỗ trợ test CSS. Tháng 10, Tim Berners-Lee rời CERN và lập ra World Wide Web Consortium (W3C).<br />
<h3 id="netscape-lên-ngôi">
Netscape lên ngôi</h3>
Sau vài vụ tranh chấp về từ “Mosaic” với đại học Illinois, James và Marc phải đổi tên Mosaic Communications Corporation thành Netscape Communications Corporations, và Mosaic Netscape thành Netscape Navigator.<br />
<br />
Năm 1995, Netscape Navigator đã đánh bại NSCA Mosaic để trở thành trình duyệt được sử dụng nhiều nhất thế giới. Cũng trong năm này, Netscape 2.0 đánh dấu một bước ngoặt mới của công nghệ với sự khai sinh ra ngôn ngữ JavaScript.<br />
<br />
Ở phía sau Netscape lại có thêm vài tân binh như: OmniWeb, WebRouser, UdiWWW… Và bên Na Uy, Opera Software ASA đã bắt tay với Telenor để phát triển trình duyệt Opera.<br />
<br />
Ngày 22/10/1995, Microsoft công bố Internet Explorer 2.0 beta.<br />
<br />
Từ đó đến giữa năm 1996, Netscape ở trong thời kỳ hoàng kim với 75% thị phần web browser. Bên cạnh đó, vẫn có thêm vài cái tên mới như InternetWorks, Quarterdeck Browser, InterAp, và WinTapestry lặng lẽ chào đời.<br />
<br />
Bert Bos về hẳn W3C để hoàn thiện W3C CSS Recommendation, cũng gọi là <a href="http://www.w3.org/TR/REC-CSS1/">đặc tả CSS1</a>. Do ảnh hưởng của Bos đối với đề án, về sau, cả Bos và Håkon đều được xem như những tác giả của CSS.<br />
<br />
Team phát triển Internet Explorer của Microsoft bấy giờ đã lên đến trăm người. Sau 3 tháng làm việc, ngày 13/8/1996, họ công bố Internet Explorer 3.0, một phiên bản được viết lại hoàn toàn mới. Đây là web browser đầu tiên hỗ trợ CSS. Ngoài ra, họ còn tích hợp thêm ActiveX controls, Java Applets… Logo hình chữ “e” màu xanh chính thức được sử dụng.<br />
<br />
<div style="text-align: center;">
<img alt="Internet Explorer 3.0" src="http://i.imgur.com/oFvHm4O.jpg" title="" /></div>
<br />
Ở Na Uy, dự án của Opera Software và Telenor đã cho kết quả là phiên bản đầu tiên của MultiTorg Opera mà về sau từ 3.0 trở đi sẽ đổi tên ngắn gọn lại thành Opera.<br />
<br />
<div style="text-align: center;">
<img alt="MultiTorg Opera" src="http://i.imgur.com/jEl4SDI.gif" height="505" title="" width="640" /></div>
<br />
Tháng 1/1997, NSCA thông báo ngừng phát triển Mosaic. Trình duyệt lịch sử này tới đây là tạm biệt sân chơi. Còn kẻ đã hạ gục nó, đứa em cùng cha, Netscape Navigator, vẫn đang tiếp tục dẫn đầu thế giới web browser.<br />
<br />
Năm 2003, NSCA cũng còn tổ chức kỷ niệm 10 năm ngày ra đời NSCA Mosaic. Ngày nay, các bạn vẫn có thể download NSCA Mosaic từ server FTP của trường:<br />
<br />
<a href="ftp://ftp.ncsa.uiuc.edu/Web/Mosaic/">ftp://ftp.ncsa.uiuc.edu/Web/Mosaic/</a><br />
<a href="ftp://ftp.ncsa.uiuc.edu/Web/Mosaic/"><br /></a>
<br />
<h3 id="đại-chiến-lần-thứ-nhất">
Đại chiến lần thứ nhất</h3>
Tháng 6/1997, Netscape Communicator 4.0 ra đời. Jim Barksdale bấy giờ là CEO của Netscape đã quyết định thay chữ “Navigator” bằng “Communicator” vì nó không còn là một trình duyệt web thuần túy nữa mà đã trở thành tổ hợp của nhiều ứng dụng như Netscape Messenger, Netscape Composer… Netscape Navigator chỉ là 1 thành phần trong đó.<br />
<br />
Tháng 10/1997, Internet Explorer 4.0 ra mắt công chúng. Theo hồi tưởng của Eric Sink, lúc này team phát triển IE ở Microsoft đã lên đến hơn 1000 người, dưới sự dẫn dắt của Scott Isaacs.<br />
Phiên bản IE 4.0 dùng Trident làm layout engine.<br />
<br />
Về kiến trúc phần mềm, web browser ngày nay luôn có 2 thành phần quan trọng:<br />
<br />
<ul>
<li>Layout engine giữ nhiệm vụ phân tích DOM và CSS để render ra giao diện</li>
<li>JavaScript engine thông dịch mã JavaScript trong trang web thành mã máy để chạy</li>
</ul>
Trident chính là layout engine đầu tiên.<br />
<br />
Mãi đến cuối 1997, Opera mới release phiên bản 3.0 hỗ trợ JavaScript. Sau đó Håkon – 1 trong 2 tác giả của CSS – về làm cho Opera Software. Nhờ vậy, Opera 3.5 release mấy tháng sau đã bắt đầu hỗ trợ CSS.<br />
<br />
Thị phần của IE đang nhích dần lên, nhưng Netscape vẫn còn giữ tới 72%, trong khi IE chỉ mới có 18%. Opera và các trình duyệt khác chia nhau 10% còn lại, đủ đứng ở vòng ngoài.<br />
<br />
Cùng với sự bùng nổ của hệ điều hành Windows, cuộc chiến giữa Netscape và IE diễn ra ngày càng kịch liệt. Vấn đề là chúng khác nhau xa. Bất chấp các chuẩn của W3C, một trang web khó lòng hiển thị tốt trên cả 2 trình duyệt. Vì thế người dùng thường gặp những thông điệp dạng: “best viewed in Netscape” hoặc “best viewed in Internet Explorer”, kèm theo link đến trang download của trình duyệt đó. Mãi đến những năm 2007-2008 tôi vẫn còn thấy nhiều trang web để như vậy.<br />
<br />
W3C khởi xướng một cuộc chiến khác giữa các webmaster và developer để giành danh hiệu “Viewable With Any Browser”. Gắn được thông điệp đó trên trang chủ là cả một niềm vinh dự lớn lao.<br />
<br />
Thành công của Windows biến Microsoft thành một gã khổng lồ, so với nó, Netscape Corp. chỉ là chú nhóc. Doanh thu của Netscape không đủ cho công ty tồn tại. Trong khi Microsoft sẵn sàng bỏ ra cho Apple số tiền lên đến 50 triệu USD chỉ để IE trở thành trình duyệt mặc định trong Macintosh.<br />
<br />
Tháng 3/1998, Netscape mở mã nguồn Netscape Communicator cho cộng đồng phát triển. Ngay sau đó, Mozilla Organization được thành lập. Mozilla nguyên là code name gốc của Netscape Navigator. Các programmers chủ chốt của Mozilla Organization cũng đều được Netscape trả lương.<br />
<br />
Tháng 8/1998, Netscape Corp. rơi vào tay America Online. Lúc này lực lượng developers của Netscape phân làm 2 nhánh, 1 thuộc về America Online, 1 hướng ra phía Mozilla và cộng đồng nguồn mở.<br />
<br />
Bên nhánh Mozilla, các developers viết lại source code, xây dựng Gecko engine, và sau đó là Mozilla Application Suite. Nhóm developer ở AOL phát triển tiếp Netscape Communicator 5.0 nhưng bỏ dở nửa chừng để làm phiên bản khác sử dụng source code của Mozilla. Năm 2000, Netscape 6.0 được release.<br />
<br />
Trong những ngày tháng chật vật của Netscape, Internet Explorer nhanh chóng vượt lên dẫn trước. Ngay từ 1999 thì IE đã chiếm lĩnh hơn 60% thị phần, chính thức bắt đầu một triều đại mới kéo dài hàng chục năm sau.<br />
<br />
Năm 2000, IE đạt tới hơn 70%. Năm 2001, Microsoft release Internet Explorer 6. Đến 2002, thị phần của IE đã lên tới 96%. Netscape Communicator chỉ còn sống lay lắt.<br />
<br />
Đại chiến trình duyệt lần thứ nhất đã kết thúc với thắng lợi hoàn toàn của IE và Microsoft.<br />
<h3 id="phượng-hoàng-tái-sinh">
Phượng hoàng tái sinh</h3>
Cũng như Netscape Communicator, Mozilla Application Suite bao gồm 1 bộ công cụ trình duyệt, message, email… Một số thành viên của Mozilla Organization như Dave Hyatt, Joe Hewitt và Blake Ross không nghĩ đó là chiến lược đúng đắn. Tháng 3/2003, Mozilla Organization thông báo thay đổi định hướng. Thay vì phát triển cả bộ ứng dụng trong Mozilla Suite, họ sẽ focus vào chỉ 2 sản phẩm: Firefox và Thunderbird.<br />
<br />
Ngày 7/1/2003, Apple lần đầu công bố phiên bản beta Safari, chạy trên OS X.<br />
<br />
<div style="text-align: center;">
<img alt="Giao diện Safari 1.1.1" src="http://i.imgur.com/8FoM5IK.jpg" title="" /></div>
<br />
Ở vị trí độc tôn, suốt 5 năm từ 2001 đến tháng 10/2006, Microsoft không ra thêm phiên bản IE nào mới. Ngày nay, chúng ta thực sự không thể tưởng tượng nổi tốc độ phát triển của một sản phẩm công nghệ lại trì trệ như vậy!<br />
<br />
Những năm tháng IE thống trị cũng là đêm trường trung cổ của WWW, cơn ác mộng của giới security. IE hỗ trợ VB script, có thể write xuống client. Virus, spyware… được mùa nảy nở rầm rộ. Thời bấy giờ, vào web trên Windows cũng như bơi thuyền trong giông bão, nếu không bị hack tài khoản thì ít ra cũng lôi về máy cả mớ virus! Chỉ có các công ty làm phần mềm Anti-virus là mặc sức ăn nên làm ra. Norton nặng nề như một cỗ đại pháo. Kaspersky hú còi inh ỏi. Rồi SpiderWeb, AVG, ClamAV, BullGoard… Tôi còn nhớ BullGoard, đỏ rực, rất mạnh mẽ. Ở Việt Nam cũng có một phần mềm biết quét virus gọi là Bkav. Dạo đó đâu đâu cũng thấy diễn đàn hacking, vừa hướng dẫn hack vừa hướng dẫn bảo mật! Hacker và các pro công nghệ thì đứng trên các hòn đảo an toàn mang tên *nix.<br />
<br />
Nhiều chuyên gia đã buộc phải lên tiếng kêu gọi người dùng phổ thông không nên lướt web bằng IE nữa, như Bruce Schneier trong Safe Personal Computing.<br />
<br />
Khỏi phải nói thêm về sự tệ hại của IE. Nhưng có nhiều web browser dựa trên nhân Trident của IE lại khá tốt. Như Maxthon hoặc AvantBrowser đều hỗ trợ tabs, plugins, bookmark, tùy biến giao diện… Chúng thông minh hơn IE rất nhiều.<br />
<br />
Và những developers tốt nhất của Netcapse giờ đây tập trung vào Firefox ở Mozilla Fundation. Firefox đầu tiên có tên là Phoenix, rồi thay bằng Firebird, cuối cùng mới đổi sang Firefox như ngày nay.<br />
<br />
Sau hàng loạt bản beta, ngày 9/10/2004, phiên bản 1.0 của Firefox đã chính thức được công bố.<br />
<br />
<div style="text-align: center;">
<img alt="Firefox 1.0" src="http://i.imgur.com/Zs4v4oC.png" title="" /></div>
<br />
Đó cũng là ngày lịch sử WWW sang trang. Sự xuất hiện của Firefox như cơn mưa rào ngày nắng hạn. Những ai hiểu biết về máy tính một chút đều vồ lấy nó. Trên các diễn đàn người ta nhao nhao bàn tán về nó, ca tụng nó. Firefox nhẹ, đẹp, nhanh, chắc chắn. Tuyệt nhất là hệ thống plugins của nó. Tuy vậy, với đa số người dùng phổ thông, web mặc định vẫn chỉ gói gọn trong cái biểu tượng chữ E màu xanh nhạt mỏng manh yếu ớt cứ vào Windows là thấy.<br />
<br />
Trong lúc Microsoft hứa hẹn về IE7, Mozilla Foundation, Opera Software và Apple đã bắt tay thành lập Web Hypertext Application Technology Working Group (WHATWG) nhằm phát triển XHTML và các chuẩn mới cho công nghệ web. Cũng chính WHATWG những năm sau này đã đóng vai trò quan trọng trong việc hoàn thiện đặc tả HTML5.<br />
<br />
Tháng 6/2006, Opera Software ra mắt Opera 9. Đây không những là trình duyệt đầu tiên vượt qua Acid2 Test mà còn mang theo những tính năng độc đáo như widgets, Speed Dial, MHTML, built-in BitTorrent client… Công nghệ torrent và P2P lúc bấy giờ đang rất hot. Sau đó, Opera ngày càng hoàn thiện qua các bản 9.1, 9.2 và 9.3. Không thể phủ nhận, vào nửa cuối những năm 2000 này Opera vẫn luôn là một trình duyệt xuất sắc, thậm chí nổi bật hơn Firefox ở nhiều điểm. Số lượng fan của Opera khá lớn. Khi phiên bản Opera 9.5 được release vào tháng 10/2008, đã có tới 4.5 triệu lượt tải chỉ sau 5 ngày đầu tiên.<br />
<br />
Ngày 18/10/2006, Microsoft release IE7, cũng bắt đầu hỗ trợ tab, zooming, tích hợp feed reader, search box… Tuy nhiên vẫn chưa pass Acid2 tests. Các chức năng trong IE7 chủ yếu vẫn là học lại từ Firefox và Opera nên hầu như không gây được ấn tượng. Microsoft tỏ ra quá chậm trong cuộc chạy đua này.<br />
<br />
Đến 24/10/2006, Mozilla cho Firefox 2.0 xuất xưởng.<br />
<br />
Ngày 11/6/2007, Apple ra mắt phiên bản Safari đầu tiên hỗ trợ Windows.<br />
<br />
Ngày 15/10/2007, <a href="http://ndaidong.techpush.net/2007/06/netscape-90-beta-1-co-gi-moi.html">phiên bản chính thức của Netscape Navigator 9 được công bố</a>. Trình duyệt này tuy dựa trên mã nguồn Firefox 2.0, nhưng có thêm khá nhiều tính năng thú vị. Ít ai ngờ đây cũng là thế hệ sau cùng của nhánh Netscape Navigator. Ngày 28/12/2007, AOL thông báo sẽ ngừng phát triển Netscape kể từ 1/2/2008, tuy nhiên sau đó lại kéo dài sang tới 1/3. Vẫn có thêm 1 bản cập nhật 9.0.0.6 vào 20/2.<br />
<br />
Tháng 12/2007, Firefox ra phiên bản 3.0. Ở thời điểm này, Firefox đã có hơn 16% thị phần, Netscape còn khoảng 0.6%. IE vẫn giữ tới 77.4% nhưng thị phần của nó liên tục bị cắn xé. Có cảm giác chắc chắn rằng, IE không sớm thì muộn cũng sẽ bại trận trước Firefox.<br />
<br />
Sau cái chết của Netscape vào 1/3/2008 khiến cho giới công nghệ tiếc nuối không ít, mãi đến cuối 2008, Google mới tung vào sân chơi một đấu thủ mới. Đó là ngày 11/12, phiên bản đầu tiên của Chrome trên Windows được ra mắt cộng đồng. Đi kèm với nó là phiên bản nguồn mở Chrominum cho cả Windows, Linux và Mac.<br />
<br />
Cuối 2009, đầu 2010, Firefox 3.5 đã trở thành trình duyệt phổ biến nhất, với hơn 32% thị phần. IE phải gộp cả mấy phiên bản 6, 7 và 8 lại thì mới được khoảng 49%. Đây là giai đoạn mà trên Windows, chức năng chính của IE chỉ là dùng để tải các trình duyệt khác.<br />
<br />
Trước đó, tháng 3/2009, Microsoft đã release IE8 nhưng không nhiều cải thiện. Phải đến tháng 3/2011, khi IE9 ra đời, Microsoft mới tạm gọi là bắt nhịp được với chuẩn web hiện đại.<br />
<br />
Thời kỳ thống trị của IE đến đây xem như đã chấm dứt, nhường chỗ cho Firefox bước lên đỉnh vinh quang.<br />
<h3 id="chrome-là-số-một">
Chrome là số một</h3>
Tuy nhiên, không ai nghĩ rằng Firefox sẽ giữ được vòng nguyệt quế dài lâu. Tân binh Chrome quá mạnh!<br />
<br />
Chrome là một cuộc cách mạng về giao diện của trình duyệt. Nó đơn giản như Google. Các trình duyệt trước đó có quá nhiều toolbar, icons… Nào là menu bar, address bar, search box, tab bar, favorite bar, plugin bar, status bar… chiếm hết nửa màn hình. Chrome bỏ hết chỉ giữ lại tab bar và address bar, còn lại là không gian hiển thị trang web. So sánh giao diện Chrome với các trình duyệt khác tựa như nhìn một cô gái xinh đẹp thuần khiết với mấy con mẹ thành thị mặt đắp đầy son phấn và lủng lẳng các loại nữ trang!<br />
<br />
Tốc độ vượt trội, tính năng mạnh mẽ, giao diện sáng sủa. Khỏi cần phải nói, ngay lập tức Chrome đã giành được cảm tình của người sử dụng.<br />
<br />
Đặc biệt, nhịp độ phát triển của Chrome vượt xa mọi trình duyệt khác. Ngay cả Firefox với cộng đồng to lớn của nó cũng phải vài tháng nửa năm mới ra được một phiên bản mới, trong khi Chrome tự động update hàng ngày, mỗi tháng đều đặn upgrade lên một version.<br />
<br />
Một năm sau ngày ra mắt, tháng 10/2009, Chrome đã chiếm được hơn 3.6% thị phần và tốc độ tăng trưởng ngày càng nhanh hơn kể từ khi có phiên bản Chrome cho Mac OS. Sang đến tháng 11/2011, thị phần của Chrome đã ngang ngửa Firefox.<br />
<br />
Đồ thị dưới đây cho thấy sự bứt phá thần tốc của Chrome đối nghịch với quá trình tụt dốc thảm hại của IE trong vòng 6 năm từ 2008 đến 2014:<br />
<img alt="Web browser world time series since 2008 to 2014" src="http://i.imgur.com/OTx0sad.jpg" title="" /><br />
Ngày nay, sân chơi trình duyệt không còn trăm hoa đua nở như thập niên trước. Mọi thứ đã đi vào ổn định. Chrome vững vàng ở ngôi vị trình duyệt số 1 trên thế giới, giữ khoảng 50% thị phần.<br />
<br />
Kế tiếp là Firefox, IE và Safari, mỗi loại dao động trong khoảng 12% đến 18%. Từ tháng 5/2012, Apple đã ngừng phát triển Safari cho Windows. Nhưng thị phần của Safari không vì thế mà suy giảm, ngược lại, nhờ sự thành công của thương hiệu Apple, Safari từng bước chen lên top 4, đôi khi còn vượt qua cả Firefox.<br />
<br />
Ở cuối top 5 trình duyệt phổ biến nhất thế giới, Opera vẫn luôn kiên trì đứng đó, mặc dù thị phần của nó chưa bao giờ đạt tới 5%.<br />
<br />
Chrome sẽ còn thống trị thế giới trình duyệt web bao lâu nữa? Cái tên nào sẽ thay thế nó? <a href="https://www.youtube.com/watch?v=iH1D31YHsgY">Microsoft Edge</a> hay <a href="https://vivaldi.com/">Vivaldi</a>? Có lẽ chúng ta phải chờ 5 hay 10 năm nữa mới biết được!<br />
<br />
<br />
<strong><em>Links tham khảo:</em></strong><br />
<ul>
<li><a href="http://en.wikipedia.org/wiki/Browser_wars">Browser wars – Wikipedia</a></li>
<li><a href="http://en.wikipedia.org/wiki/World_Wide_Web">World Wide Web – Wikipedia</a></li>
<li><a href="http://www94.web.cern.ch/WWW94/">First International Conference on the World-Wide Web</a></li>
<li><a href="http://www.w3.org/People/Berners-Lee/">Tim Berners-Lee</a></li>
<li><a href="http://www.businessweek.com/1998/15/topstory.htm">The education of Marc Andreessen</a></li>
<li><a href="http://en.wikipedia.org/wiki/Mozilla_Foundation">Mozilla Foundation – Wikipedia</a></li>
<li><a href="http://www.informationweek.com/aol-kills-netscapes-future-leaves-firefox-to-battle-ie-/d/d-id/1062770">AOL Kills Netscape’s Future, Leaves Firefox To Battle IE</a></li>
<li><a href="http://stats.areppim.com/stats/stats_webbrowserxtime_sam.htm">Web browser market shares</a></li>
<li><a href="http://en.wikipedia.org/wiki/Usage_share_of_web_browsers">Usage share of web browsers – Wikipedia</a></li>
<li><a href="http://www.cnet.com/news/microsoft-edge-unveiled/">Adios, Spartan. Hello, Microsoft Edge browser</a></li>
</ul>
Dong Nguyenhttp://www.blogger.com/profile/08315900287977325135noreply@blogger.comtag:blogger.com,1999:blog-4828609964961329038.post-45195223782489877152015-03-18T23:06:00.001+07:002015-10-14T23:49:13.132+07:00Two-ways data binding với Object.observeCác framework Javascript thường nhấn mạnh vào tính năng data binding như một ưu thế nổi bật của chúng. Nhưng thực ra bạn có thể thêm data binding vào ứng dụng Javascript của bạn một cách nhanh chóng và không có gì khó khăn cả.<br />
<br />
Data binding về bản chất chỉ là việc đồng bộ thông tin một cách tự động giữa phần thể hiện ra ngoài trang web (DOM element, thường liên quan đến View) và phần dữ liệu được kiểm soát bên trong code Javascript (properties, thường liên quan đến Model). Vì thế, trong mô hình MVC, người ta thường hiểu data binding như là cơ chế tự cập nhật View khi Model thay đổi, và/hoặc tự cập nhật Model khi View thay đổi. Nếu sự đồng bộ diễn ra theo cả 2 chiều thì đó là two-ways binding.<br />
<br />
Nguyên lý của data binding là theo dõi sự thay đổi của DOM và đối tượng Javascript liên quan, một khi có thay đổi ở phía bên này thì phát tín hiệu để cập nhật ở đầu kia của mối quan hệ.<br />
<br />
<img alt="Ảnh minh họa data binding, codeproject.com" src="http://1.bp.blogspot.com/-AY2Ax-YDRr8/VQq_9y-koRI/AAAAAAAAHhQ/ti5ln4VxyLE/s1600/data-binding.jpg" title="" /> <br />
<h3 id="một-trường-hợp-cụ-thể">
Một trường hợp cụ thể</h3>
Giả sử chúng ta có 1 object:<br />
<br />
<pre><code>var people = {
firstName: "Dong",
lastName: "Nguyen"
}
</code></pre>
<br />
và chúng ta output thông tin này ra ngoài giao diện bằng đoạn HTML sau:<br />
<br />
<pre><code><input type="text" id="txtFirstName" value="">
<input type="text" id="txtLastName" value="">
</code></pre>
<br />
Để hiển thị, chúng ta có script sau:<br />
<br />
<pre><code>var people = {
firstName: "Dong",
lastName: "Nguyen"
}
var element = function(id){
return document.getElementById(id);
}
var $firstName = element('txtFirstName');
var $lastName = element('txtLastName');
var render = function(){
$firstName.value = people.firstName;
$lastName.value = people.lastName;
}
render();
</code></pre>
<br />
Nhìn nó như thế này: <br />
<br />
<a href="https://jsfiddle.net/ndaidong/76eadzth/1/">https://jsfiddle.net/ndaidong/76eadzth/1/</a><br />
<br />
Ở đây nói về data binding tức là chúng ta muốn :<br />
<ul>
<li>Khi user thay đổi giá trị của các input thì thuộc tính của people cũng thay đổi theo. Đây là chiều từ DOM tới Object.</li>
<li>Khi kịch bản làm cho thuộc tính của people thay đổi thì giá trị của các input cũng được thay đổi. Đây là chiều từ Object tới DOM.</li>
</ul>
<h3 id="chiều-thứ-nhất-từ-dom-tới-object">
Chiều thứ nhất: từ DOM tới Object</h3>
Để giải quyết việc đồng bộ từ DOM tới Object thì rất dễ vì có thể gắn event listener vào bất kỳ HTML element nào để lắng nghe. Chúng ta xử lý đoạn này trước bằng hàm <em>domToObject</em> như sau:<br />
<br />
<pre><code>function domToObject(source, target, attribute){
source.onchange = function(){
var v = String(source.value);
target[attribute] = v;
}
}
</code></pre>
<br />
Hàm này nhận vào 3 tham số, phần tử DOM đóng vai trò nguồn phát tín hiệu, đối tượng Javascript đóng vai trò tiếp nhận tín hiệu, và thuộc tính mà chúng ta muốn theo dõi. Bây giờ hãy thử cho kịch bản tự cập nhật các giá trị của đối tượng <strong><em>people</em></strong> khi bên ngoài input thay đổi: <br />
<br />
<pre><code> domToObject($firstName, people, 'firstName');
domToObject($lastName, people, 'lastName');
</code></pre>
<br />
Kết quả như thế này:<br />
<br />
<a href="https://jsfiddle.net/ndaidong/76eadzth/15/">https://jsfiddle.net/ndaidong/76eadzth/15/</a><br />
<br />
Các bạn thử thay đổi các giá trị trong inputs và nhấn button bên dưới để kiểm tra xem các thuộc tính của <strong><em>people</em></strong> đã được đồng bộ ra sao.<br />
<h3 id="chiều-thứ-2-từ-object-tới-dom">
Chiều thứ 2: từ Object tới DOM</h3>
Bây giờ, chúng ta xét theo chiều ngược lại, từ Object tới DOM. Thời “xa xưa”, mọi thứ rất phức tạp. Hãy xem bài viết của Luca Ongaro cách đây 2 năm:<br />
<br />
<a href="http://www.lucaongaro.eu/blog/2012/12/02/easy-two-way-data-binding-in-javascript/">Easy Two-Way Data Binding in JavaScript</a><br />
<br />
Nhưng bây giờ, với Object.observe, câu chuyện trở nên đơn giản hơn nhiều. <br />
<br />
Đây là cách tôi xử lý, với một hàm objectToDom như sau:<br />
<br />
<pre><code>function objectToDom(source, target, property){
Object.observe(source, function(changes){
changes.forEach(function(change){
if(change.name === property){
target.value = change.object[property];
}
});
});
}
</code></pre>
<br />
Hàm này cũng nhận vào 3 tham số, nhưng bắt đầu với source là một đối tượng Javascript, kế đó - target - là phần tử DOM móc nối với nó, và cuối cùng là property - tên thuộc tính mà chúng ta muốn nắm bắt sự thay đổi.<br />
<br />
Kết quả như sau:<br />
<br />
<a href="https://jsfiddle.net/ndaidong/76eadzth/16/">https://jsfiddle.net/ndaidong/76eadzth/16/</a><br />
<br />
Trong demo, tôi để <strong>people</strong> tự thay đổi giá trị các thuộc tính <em>firstName</em> và <em>lastName</em> thành “Altonio” và “Vivaldi” sau vài giây. Các bạn có thể nhấn button để thay đổi chúng một cách ngẫu nhiên thành <a href="http://en.wikipedia.org/wiki/List_of_Presidents_of_the_United_States">tên các tổng thống Mỹ</a> ;)<br />
<br />
Và đây là vấn đề chính: trong hàm <em>objectToDom</em>, tôi sử dụng Object.observe để theo dõi các biến đổi trên đối tượng Javascript. <br />
<br />
Syntax của Object.observe như sau:<br />
<br />
<pre><code>Object.observe(ob, callback);
</code></pre>
<br />
Khi 1 hay một số thuộc tính của <em>ob</em> thay đổi, hàm callback sẽ được gọi cùng với tham số là một mảng chứa các thuộc tính đã thay đổi. Trên website của Mozilla có giải thích rất rõ về <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/observe" target="_blank">Object.observe</a>.<br />
<br />
Các ví dụ trong bài dùng để minh họa cách áp dụng data binding theo từng chiều ở mức độ cơ bản. Khi đưa vào thực tế, các bạn có thể cần bổ sung thêm các phương thức khác để testing, validating… <br />
<br />
Now, hãy thử ghép chúng lại…<br />
<h3 id="đồng-bộ-2-chiều">
Đồng bộ 2 chiều</h3>
Dưới đây tôi sẽ xử lý cả 2 chiều cùng lúc bằng cách định nghĩa 1 đối tượng DataBinder như sau:<br />
<br />
<pre><code>var DataBinder = (function(){
var domToObject = function(source, target, attribute){
source.onchange = function(){
var v = String(source.value);
target[attribute] = v;
}
}
var objectToDom = function(source, target, property){
Object.observe(source, function(changes){
changes.forEach(function(change){
if(change.name === property){
target.value = change.object[property];
}
});
});
}
var isElement = function(v){
if(!!v && typeof v === 'object'){
var ots = Object.prototype.toString;
if(ots.call(v).indexOf('HTML') !== -1 && ots.call(v).indexOf('Element') !== -1){
return true;
}
}
return false;
}
var start = function(source, target, attr){
if(isElement(source)){
domToObject(source, target, attr);
objectToDom(target, source, attr);
}
else{
objectToDom(source, target, attr);
domToObject(target, source, attr);
}
}
return {
domToObject: domToObject,
objectToDom: objectToDom,
start: start
}
})();
</code></pre>
<br />
Như các bạn thấy, DataBinder có 3 public methods: <em>domToObject</em>, <em>objectToDom</em> và <em>start</em> dùng để tự động bind theo 2 chiều. Nhờ đó tôi chỉ việc gọi:<br />
<br />
<pre><code>DataBinder.start(people, $firstName, 'firstName');
DataBinder.start(people, $lastName, 'lastName');
</code></pre>
<br />
Hoặc có thể đảo thứ tự 2 tham số đầu tiên:<br />
<br />
<pre><code>DataBinder.start($firstName, people, 'firstName');
DataBinder.start($lastName, people, 'lastName');
</code></pre>
<br />
Dù thế nào, kết quả thu được vẫn như sau:<br />
<br />
<a href="https://jsfiddle.net/ndaidong/76eadzth/17/">https://jsfiddle.net/ndaidong/76eadzth/17/</a><br />
<br />
Cần nhắc lại, DataBinder như trên vẫn thiếu một vài thứ như exception handling, validation… Trong bài này, tôi chỉ muốn share concept của Object.observe và việc áp dụng nó trong two-ways data binding mà thôi.<br />
<h3 id="lời-kết">
Lời kết</h3>
Object.observe được mô tả trong ES7, hiện nay mới chỉ có trình duyệt Chrome hỗ trợ (33+). Nhưng polyfills của <a href="https://github.com/jdarling/Object.observe">Jeremy Darling</a> hoặc <a href="https://github.com/MaxArt2501/object-observe">MaxArt2501</a> viết sẽ giúp bạn đem nó vào các trình duyệt khác. Chỉ việc load script từ CDN của <a href="http://polyfills.io/">Polyfills.io</a> như cách tôi load vào JSFiddle.<br />
<br />
Mong rằng qua những gì tôi đề cập trên đây, các fan mới của Javascript có thể hiểu được bản chất vấn đề data binding và có khả năng ứng dụng Object.observe vào thực tiễn.<br />
<br />
Cảm ơn các bạn đã theo dõi bài viết này.Dong Nguyenhttp://www.blogger.com/profile/08315900287977325135noreply@blogger.comtag:blogger.com,1999:blog-4828609964961329038.post-84871223239507701942015-03-12T00:30:00.000+07:002015-03-19T21:43:44.506+07:00Những skills mới cho web developer 2015<br />
<br />
Thế giới web năm 2015 sẽ có nhiều thay đổi mang tính cách mạng, dưới đây tôi điểm qua một số nét chính. Bên cạnh mỗi cái tên sẽ là chỉ số đánh giá mức độ cần kíp của skill đó - theo quan điểm cá nhân thôi :)<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-gMTurb-pzqo/VQrH5oY-viI/AAAAAAAAHhg/W2qyfE7BUOc/s1600/wd2015.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://2.bp.blogspot.com/-gMTurb-pzqo/VQrH5oY-viI/AAAAAAAAHhg/W2qyfE7BUOc/s1600/wd2015.jpg" height="180" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<h2>
1. <a href="http://webcomponents.org/">Web Components</a>: 10/10</h2>
<br />
Web Components là một trong những thuật ngữ quan trọng nhất hiện nay. Nó bao gồm 4 khái niệm chính yếu: <a href="http://www.html5rocks.com/en/tutorials/webcomponents/customelements/">Custom Elements</a>, <a href="http://www.html5rocks.com/en/tutorials/webcomponents/imports/">HTML Imports</a>, <a href="http://www.html5rocks.com/en/tutorials/webcomponents/template/">HTML Templates</a> và <a href="http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom/">Shadow DOM</a>.<br />
<br />
Với Web Components, khả năng của HTML và trình duyệt sẽ được mở rộng ra vô hạn. Đó là một thế giới web hoàn toàn mới, tràn đầy sức mạnh sáng tạo. Theo đó, web developers sẽ phải thay đổi quan niệm về cấu trúc hồ sơ DOM truyền thống, cấu trúc trang web, cũng như cấu trúc files/folders của hệ thống web. Có thể cách làm cũ ( viết trang HTML, nhúng các files CSS và JS vào) sẽ trở nên không còn hợp lý nữa. Thay vào đó, người ta cần tách ra nhiều components và phối hợp chúng lại thành trang web. Giống như cách chúng ta chia 1 mặt bằng ra nhiều mảnh cho nhiều nhà thầu đến xây dựng vậy. Quy trình làm web vì thế tất yếu cũng sẽ thay đổi theo. Mỗi component là 1 tổ hợp hoàn chỉnh của HTML, CSS và JavaScript được đóng gói trong 1 scope riêng biệt, có thể tương tác lẫn nhau nhưng không ảnh hưởng lẫn nhau. Hiện nay, nếu bạn nhúng cả jQuery 2.1 và jQuery 1.2 vào cùng trang web, sẽ chỉ có 1 thư viện chạy, và thế nào cũng có lỗi xuất hiện đâu đó. Nhưng với Web Components, bạn có thể dùng nhiều version của cùng library/framwork trên cùng trang web. No problem.<br />
<br />
Trong tưởng tượng của tôi, tương lai có thể sẽ ra đời 1 dạng Web Components Market nơi các developers làm và bán components như là người ta đang bán Widgets và jQuery Plugins hiện nay vậy.<br />
<br />
<a href="https://angular.io/">Angular 2</a> sẽ tận dụng khả năng của Web Components để xử lý lại một số vấn đề chưa tốt trong Angular 1.x như databinding, templating… Đặc biệt Tranclusion trong Angular 1 sẽ bị loại bỏ, thay vào đó Angular 2 sử dụng Shadow DOM.<br />
<br />
Hiện có nhiều cách tiếp cận Web Components, như <a href="https://www.polymer-project.org/0.5/">Polymer</a> của Google, <a href="http://x-tags.org/">X-tags</a> của Mozilla, và <a href="http://bosonic.github.io/">Bosonic</a>. Hy vọng rằng tất cả rồi sẽ hợp lại trong 1 ecosystem thay vì cứ phân tán như vậy.<br />
<br />
Theo đánh giá của tôi, Web Components là kiến thức bắt buộc phải có đối với front-end developer hiện nay.<br />
<br />
<h2>
2. <a href="https://github.com/lukehoban/es6features">ES6</a>: 9/10</h2>
<br />
<a href="https://people.mozilla.org/~jorendorff/es6-draft.html">Đặc tả ECMA-262</a> biến JavaScript mà chúng ta đang dùng trở thành một thứ gì đó hoàn toàn mới lạ. Có lẽ không nhiều hơn 10% javascripter trên thế giới hiện nay đủ khả năng chơi với nó. Nhưng tôi tin rằng cho đến cuối năm, con số đó sẽ tăng lên hơn 50%. Hiện đã thấy nhiều framework cho Node.js và browser được viết trên đặc tả ES6, như <a href="http://waigojs.com/">WaigoJS</a>, <a href="http://aurelia.io/">Aurelia</a>… <a href="https://iojs.org/en/es6.html">IO.js đã hỗ trợ ES6</a> ngay từ khi ra mắt.<br />
<br />
Các chức năng nổi bật trong ES6 gồm <a href="http://es6rocks.com/2014/10/arrow-functions-and-their-scope/">arrow function</a>, <a href="http://www.2ality.com/2013/03/subclassing-builtins-es6.html">subclassable built-ins</a>, và collections (<a href="http://www.nczonline.net/blog/2012/10/09/ecmascript-6-collections-part-2-maps/">Maps</a>, <a href="http://www.nczonline.net/blog/2012/09/25/ecmascript-6-collections-part-1-sets/">Sets</a>…) Những chức năng khác như classes, modules, module loaders, promises, proxies… thì những developers xông xáo chắc cũng đã làm quen trên Node.js hoặc thông qua các polyfills rồi. Bên cạnh đó, ES6 cũng thêm vào không ít methods cho các đối tượng dựng sẵn.<br />
<br />
Angular 2 sẽ dùng ES6 Modules thay cho Angular Modules ở v1. Nếu bạn muốn tiếp tục theo đuổi Angular, bạn sẽ cần phải nghiên cứu sâu hơn về ES6.<br />
<br />
<h2>
3. <a href="http://www.typescriptlang.org/">TypeScript</a>: 6/10</h2>
<br />
Lâu nay JavaScript vẫn bị các lập trình viên khó tính xem là ngôn ngữ không mạnh, và nguyên nhân chính là do nó thiếu những ràng buộc chặt chẽ về kiểu (type). TypeScript là JavaScript được mở rộng thêm khả năng định kiểu, modules, classes, interfaces, namespaces… vô cùng phức tạp chẳng kém gì các ngôn ngữ hệ thống. Tôi chưa thực sự dùng cái này nhưng nhìn code khá đẹp mắt, ở mức sơ đẳng thì cũng giống như khai báo schema trong Mongoose thôi!<br />
<br />
Thoạt tiên tôi có ý nghĩ rằng những thứ này có thể làm hỏng tính đơn giản, linh hoạt của JavaScript. Nhưng nhìn sang PHP, phải chăng nó cũng đang đi cùng một hướng. Cả PHP và JavaScript đều bắt đầu như những ngôn ngữ scripting thuần túy, dần hoàn thiện theo thời gian để trở thành những ngôn ngữ lập trình chặt chẽ, powerful. Đặc biệt là khi JavaScript ngày nay không chỉ quanh quẩn trên browsers mà đã tràn lên cả servers và handset devices. Nó cần phải mạnh mẽ hơn, chắc chắn hơn để có thể làm chủ các vùng đất nhạy cảm đó.<br />
<br />
TypeScript là 1 đóng góp đáng giá của Microsoft cho thế giới web. Các tác giả của Angular đã tạo ra AtScript cho Angular 2 nhưng sau cùng vẫn phải loại bỏ để dùng TypeScript. Tuy nhiên bạn không cần quá đặt nặng TypeScript lúc này. Nó chỉ đơn giản là syntax, dùng nhiều sẽ quen.<br />
<br />
<h2>
4. <a href="https://github.com/systemjs/systemjs">SystemJS</a>: 10/10</h2>
<br />
Trong vài năm trở lại đây, module pattern trở thành khái niệm phổ biến nhất trong kiến trúc nền tảng JavaScript. Từ module pattern mới nảy sinh ra 2 khái niệm khác là AMD (Asynchronous Module Definition) và DI (Dependencies Injection). Đã có nhiều giải pháp cho vấn đề AMD như <a href="http://www.commonjs.org/">CommonJS</a>, <a href="http://requirejs.org/">RequireJS</a>, <a href="https://github.com/cujojs/curl">curl.js</a>… Nhưng có vẻ đã đến lúc kết thúc cuộc đua, và tôi đoán rằng<a href="https://github.com/systemjs/systemjs">SystemJS</a> sẽ thay thế tất cả, vì nó đi cùng ES6; làm việc với mọi compiler; tương thích mọi phương thức module loading cũ; hỗ trợ map, path, bundles… Thậm chí nó có thể thay thế cả lệnh require quen thuộc trên Node.js server.<br />
<br />
AMD là khái niệm mà web developer phải nắm vững từ ít nhất 1 năm trước, bằng không bạn sẽ chỉ mơ hồ đứng sau các framworks mà không hiểu tại sao nó phải viết như thế, cái gì khiến nó phải tổ chức như thế… Nếu bây giờ bạn vẫn chưa vận dụng AMD được một cách tự nhiên thì phải lập tức khắc phục hạn chế này.<br />
<br />
<h2>
5. <a href="http://jspm.io/">jspm</a>: 10/10</h2>
<br />
Không phải bower, browserify… mà là jspm sẽ chấm dứt thời kỳ cát cứ phân tranh của các package management tools trên browsers. Tôi tin chắc điều đó vì jspm được thiết kế cho SystemJS, hỗ trợ mọi định dạng module từ RequireJS, CommonJS đến ES Harmony. Nếu các bạn để ý rằng bower chỉ làm 1 việc duy nhất là chạy lệnh ngầm tải repositories từ GitHub về thư mục bower_components ở local, thì jspm làm việc với cả GitHub và NPM, cho khả năng xử lý trùng lặp, version index, và tìm kiếm tốt hơn rất nhiều.<br />
<br />
Tuy ít được biết đến như bower, nhưng jspm với sự tương thích SystemJS/ES6 chắc chắn sẽ trở thành giải pháp hoàn chỉnh cho vấn đề quản lý packages và dependencies trên front-end.<br />
<br />
Trên đây là những kiến thức dành cho front-end developers mà tôi tin rằng sẽ vô cùng hot vào nửa cuối năm 2015. Sẽ rất tuyệt nếu các bạn để mắt đến chúng và thử trải nghiệm ngay từ bây giờ.<br />
<br />
<br />
<br />
<i><b><u>Links tham khảo:</u></b></i><br />
<ul>
<li><a href="http://www.infoq.com/articles/javascript-skills-in-demand">JavaScript is Cool… and the Market is Hot - by Areos Ledesma, Will Asrari</a></li>
<li><a href="http://glenmaddern.com/articles/javascript-in-2015">JavaScript in 2015, a whole new world - by Glen Maddern</a></li>
<li><a href="http://redmonk.com/sogrady/2015/01/14/language-rankings-1-15/">The RedMonk Programming Language Rankings: January 2015</a></li>
<li><a href="https://docs.google.com/document/d/1kpuR512G1b0D8egl9245OHaG0cFh0ST0ekhD_g8sxtI/edit">Databinding with Web Components - Angular Design Docs</a></li>
<li><a href="https://docs.google.com/document/d/11YUzC-1d0V1-Q3V0fQ7KSit97HnZoKVygDxpWzEYW0U/edit#">AtScript Primer - Angular Design Docs</a></li>
</ul>
Dong Nguyenhttp://www.blogger.com/profile/08315900287977325135noreply@blogger.comDa Nang, Da Nang, Vietnam16.0544068 108.2021667000000215.932326799999998 108.04080520000002 16.1764868 108.36352820000002tag:blogger.com,1999:blog-4828609964961329038.post-70999855500437968962015-02-20T23:15:00.000+07:002015-02-20T23:29:53.459+07:006 bí quyết dứt điểm công việc<div>
<br /></div>
<div>
<span style="background-color: white; color: rgba(0, 0, 0, 0.8); font-family: 'Roboto Slab', 'Times New Roman', serif; font-size: 14px; line-height: 19px; white-space: pre-wrap;"><i>Dịch theo "<a href="http://www.dumblittleman.com/2015/02/6-tips-getting-things-done.html" target="_blank">6 Tips for Getting Things Done</a>", <a href="https://twitter.com/Louise_M_Watson" target="_blank">Louise Watson</a></i></span></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
Mọi người luôn thắc mắc về khả năng dứt điểm công việc của tôi. Ở trường phổ thông, lên đại học, khi đi làm hay trong những hoạt động tôi đã tham gia suốt nhiều năm, tôi vẫn thường được hỏi cùng một câu đó: "Chị lấy đâu ra thời gian?"</div>
<br />
Nhưng tự xét thì tôi cũng chẳng có kỹ xảo gì đặc biệt. Giống như nhiều người khác, tôi cũng dây dưa lần lữa khi không muốn làm điều gì đó, và tôi thường chỉ làm đến mức tối thiếu yêu cầu của công việc, nhưng đó có vẻ vẫn là kỳ tích đối với một số người.<br />
<br />
Vì thế tôi đã thử lục lọi trong tâm trí và nêu ra đây vài ý tưởng để giúp bạn nếu bạn đang cảm thấy ngập đầu công việc.<br />
<br />
<br />
<h3>
1. Có danh sách công việc cho mỗi ngày</h3>
<br />
Hằng đêm, trước khi đi ngủ, hãy lập danh sách những công việc quan trọng nhất cho ngày hôm sau. <br />
<br />
Danh sách nên ngắn gọn khoảng 3 đến 4 mục để tránh gây áp lực. <br />
<br />
Tôi vốn không phải là tín đồ công nghệ nên chỉ dùng 1 cái bảng trong nhà bếp để ghi những gì phải làm. Xong việc nào thì đánh dấu hoàn tất việc đó, như vậy tôi có thể trông thấy những gì đã làm được trong ngày.<br />
<br />
<br />
<h3>
2. Dành thời gian thực hiện và bám sát kế hoạch.</h3>
<br />
Hãy tự cam kết và thực hiện kế hoạch một cách nghiêm túc. Ghi đầu việc vào nhật ký, lịch, hay bảng viết. Một khi đã ghi ra thì phải làm cho được. Giới hạn mỗi đầu việc trong một khoảng thời gian nếu cần. Các đầu việc của tôi thường mất khoảng 20 đến 30 phút, đảm bảo rằng chúng đều là những việc khả thi.<br />
<br />
Tôi viết phần lớn bài này trong vòng 20 phút. Tất nhiên là phải mất thêm nhiều thời gian hơn để hoàn chỉnh, nhưng trong 20 phút làm việc tập trung, căng thẳng tôi đã có thể viết ra hầu hết ý tưởng trong một dàn bài. Bạn sẽ cảm thấy ngạc nhiên vì số lượng công việc có thể làm dứt điểm khi dành trọn vẹn tâm tư để thực hiện chúng trong khoảng thời gian ấn định sẵn, không bị gián đoạn. <br />
<br />
Điều này dẫn tôi đến ý tưởng kế tiếp...<br />
<br />
<br />
<h3>
3. Tránh xa mọi sự phiền nhiễu</h3>
<br />
Tắt điện thoại. Ngắt mạng (dân IT đừng nghe tác giả điểm này! - DN). Dán thông báo "<i>Không phận sự miễn vào</i>" lên trước cửa. Hãy đảm bảo không ai quấy rầy bạn.<br />
<br />
Rất dễ để "ngó qua" Facebook hoặc mấy thứ vớ vẩn khác rồi mất hàng giờ tán dóc và xem xét chúng. Đừng để bị chúng lôi cuốn!<br />
<br />
<br />
<h3>
4. Đừng trì hoãn. Hãy tự hỏi: "tại sao?"</h3>
<br />
Cuối năm, tôi dự tính đăng ký một chương trình tiếp thị liên kết. Việc này rất đơn giản, chỉ mất vài phút là xong.<br />
<div>
<br /></div>
<div>
Nhưng thật trớ trêu, cũng chính vì sự dễ dàng đó mà tôi đâm ra bê trễ. "Chỉ mất có 5 phút thôi mà, để mai làm cũng được!" - tôi cứ nghĩ bụng vậy, hết ngày này sang ngày khác.<br />
<br />
Cuối cùng tôi phải tự hỏi tại sao chỉ có cái việc đơn giản thế mà mãi không xong? Phải chăng tôi sợ thừa tiền, hay là cảm giác áy náy khi nhận tiền mà chẳng bỏ công? <br />
<br />
Rất nhanh chóng, ngay khi tự hỏi như vậy tôi đã đồng thời hành động. Tài khoản được tạo chỉ trong chưa đầy 5 phút.<br />
<br />
<br />
<h3>
5. Tách việc lớn ra thành các việc nhỏ</h3>
<br />
Bên cạnh danh sách công việc hàng ngày, tôi cũng bắt đầu lập danh sách công việc cho mỗi tháng. Một trong các việc tôi phải làm trong tháng Một là mở gian hàng. Đó là việc tôi chưa từng làm trước đây và khiến tôi lo lắng. Rất lo lắng.<br />
<br />
Thế rồi bất chấp sợ hãi, tôi lao đầu vào công việc và đi tong luôn tuần đầu tiên của tháng để bận rộn lên kế hoạch cho khóa học 4 tuần. Cũng tốt, tháng Một đã đến rồi đi trong khi gian hàng vẫn chưa có. <br />
<br />
Thay vì xấu hổ cho nhiệm vụ bất thành, tôi kiểm tra lại trong danh sách đầu việc để xem mình đã diễn đạt nó ra sao. Trông nó như thế này:<br />
<br />
<i>- Workshop</i><br />
<br />
Chính là vậy. Đối với công việc phức tạp này, lẽ ra tôi nên chia nhỏ ra nhiều bước để rồi hoàn thành từng bước. Trong trường hợp trên, đó là phải liên hệ với một người bạn đã từng nói rằng chị ấy biết người quan tâm đến gian hàng, và rồi xem thử nên đặt nó ở đâu.<br />
<br />
Bây giờ nhiệm vụ tháng Hai của tôi ghi là: "Bố trí một ngày." Nghe ra đã bớt nguy hiểm hơn nhiều!<br />
<br />
Chia nhỏ các task lớn khiến cho công việc dễ quản lý hơn và cũng dễ làm hơn.<br />
<br />
<br />
<h3>
6. Tưởng thưởng</h3>
<br />
Tôi cũng chỉ mới hiểu ra tầm quan trọng của việc tự mình tưởng thưởng cho mình sau mỗi công việc hoàn tất. Hơn một năm trước, tôi dự một khóa học trong đó người ta dạy cách tự thưởng mỗi tuần. Tôi chưa từng làm vậy. Tôi cứ lập kế hoạch ra rồi quên lãng rồi lại kết luận rằng việc đó không đáng.<br />
<br />
Gần đây, tôi lại theo một khóa học viết trực tuyến, ở đó vào cuối khóa chúng tôi cũng được nghe nói thêm về sự tự tưởng thưởng. Lần này, tôi mua cho mình một cây đàn piano.<br />
<br />
Phần thưởng không cần phải lớn hoặc đắt giá. Nó có thể là một chút thư giãn bên ly trà, hay một chuyến nghỉ mát, nhưng quan trọng hơn cả là nó cho bạn một sự xác nhận rằng bạn đã hoàn tất công việc, nó cũng khích lệ bạn tiếp tục phấn đấu khi mọi thứ trở nên khó khăn hơn.<br />
<br />
<br />
Trên tất cả, hãy nhớ rằng đó không phải là một cuộc đua. Hãy làm những gì bạn có thể làm trong ngày và cho phép mình được xả hơi.<br />
<br />
Sau mỗi phần việc hoàn tất và được ghi dấu, bạn sẽ càng đến gần mục tiêu của bạn.<br />
<div>
<br /></div>
<div>
<br /></div>
<div style="text-align: center;">
------------------------------------------</div>
<div>
<br /></div>
<div>
<span style="background-color: white; color: rgba(0, 0, 0, 0.8); font-family: 'Roboto Slab', 'Times New Roman', serif; font-size: 14px; line-height: 19px; white-space: pre-wrap;"><a href="https://twitter.com/Louise_M_Watson" target="_blank">Louise Watson</a> là chủ nhân của blog </span><a href="http://www.louisemwatson.com/">http://www.louisemwatson.com/</a> <span style="background-color: white; color: rgba(0, 0, 0, 0.8); font-family: 'Roboto Slab', 'Times New Roman', serif; font-size: 14px; line-height: 19px; white-space: pre-wrap;">nơi </span>chị<span style="background-color: white; color: rgba(0, 0, 0, 0.8); font-family: 'Roboto Slab', 'Times New Roman', serif; font-size: 14px; line-height: 19px; white-space: pre-wrap;"> thường đăng tải những bài viết thú vị về phong cách sống. Ngoài ra chị cũng viết bài cho nhiều trang tin khác ở Mỹ. Người ta thường biết</span><span style="background-color: white; color: rgba(0, 0, 0, 0.8); font-family: 'Roboto Slab', 'Times New Roman', serif; font-size: 14px; line-height: 19px; white-space: pre-wrap;"> đến Louise qua 2 tựa sách "<a href="http://www.louisemwatson.com/the-book/" target="_blank">Stop making your life a misery</a>" và "<a href="http://www.amazon.co.uk/gp/product/B00SQ764IQ" target="_blank">Shy altitude</a>".</span></div>
<div>
<span style="background-color: white; color: rgba(0, 0, 0, 0.8); font-family: 'Roboto Slab', 'Times New Roman', serif; font-size: 14px; line-height: 19px; white-space: pre-wrap;"><br /></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-1YqxNSaZEvY/VOddDrmozaI/AAAAAAAAHek/LhvE1YvG93w/s1600/Louise%2BWatson.jpeg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://2.bp.blogspot.com/-1YqxNSaZEvY/VOddDrmozaI/AAAAAAAAHek/LhvE1YvG93w/s1600/Louise%2BWatson.jpeg" height="320" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://twitter.com/Louise_M_Watson" style="font-family: 'Roboto Slab', 'Times New Roman', serif; font-size: 14px; line-height: 19px; text-align: start; white-space: pre-wrap;" target="_blank">Louise Watson</a></div>
<div>
<span style="background-color: white; color: rgba(0, 0, 0, 0.8); font-family: 'Roboto Slab', 'Times New Roman', serif; font-size: 14px; line-height: 19px; white-space: pre-wrap;"><br /></span></div>
<div>
<br /></div>
</div>
Dong Nguyenhttp://www.blogger.com/profile/08315900287977325135noreply@blogger.comtag:blogger.com,1999:blog-4828609964961329038.post-60304003046143368452015-02-13T20:49:00.000+07:002015-02-13T20:49:16.836+07:00Tạo môi trường dev thông minh bằng virtual machine<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: white; color: black; font-family: 'Droid Sans'; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Setup environment trên máy tính để dev là công việc bắt buộc phải làm ngay khi bước vào triển khai dự án. Websites và webapps ngày nay thường được build dưới hình thức của những tổ hợp công nghệ, kết nối nhiều nguồn tài nguyên lại với nhau, khiến cho vấn đề setup environment và đồng bộ hóa các environments giữa máy chủ production và máy chủ dev, cũng như giữa các máy dev với nhau trở nên khó khăn hơn.</span></div>
<b id="docs-internal-guid-91d21c1e-832b-da03-1cd3-edd52d77733a" style="font-weight: normal;"><br /></b>
<div dir="ltr" style="line-height: 1.5545454545454545; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: white; color: black; font-family: 'Droid Sans'; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Có rất nhiều tổ hợp công nghệ, chẳng hạn MEAN stack là tổ hợp MongoDB, ExpressJS, AngularJS và Node.js - chúng đi với nhau và bạn phải hiểu cả 4 thứ để kiểm soát được chúng. Hay như tổ hợp LAMP kinh điển (Linux – Apache – MySQL – Perl/PHP) dù đã trải qua hàng chục năm nhưng vẫn được sử dụng mỗi ngày. Với xu hướng cloud computing hiện nay, mọi việc không dừng ở đó. Nhiều công nghệ mới cũ được tổ hợp lại với nhau theo những cách thức vô cùng phức tạp, khó mà nắm bắt. Bằng cách kết hợp một số trong những cái tên dưới đây, người ta có thể tạo ra vô vàn kiến trúc:</span></div>
<b style="font-weight: normal;"><br /></b>
<ul style="margin-bottom: 0pt; margin-top: 0pt;">
<li dir="ltr" style="background-color: white; color: black; font-family: 'Droid Sans'; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; list-style-type: disc; text-decoration: none; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.5545454545454545; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: white; color: black; font-family: 'Droid Sans'; font-size: 16px; font-style: italic; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Cloud computing:</span><span style="background-color: white; color: black; font-family: 'Droid Sans'; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"> Amazon, Azure, Rackspace...</span></div>
</li>
<li dir="ltr" style="background-color: white; color: black; font-family: 'Droid Sans'; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; list-style-type: disc; text-decoration: none; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.5545454545454545; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: white; color: black; font-family: 'Droid Sans'; font-size: 16px; font-style: italic; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">OS platform:</span><span style="background-color: white; color: black; font-family: 'Droid Sans'; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"> RedHad, Ubuntu Server, CentOS...</span></div>
</li>
<li dir="ltr" style="background-color: white; color: black; font-family: 'Droid Sans'; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; list-style-type: disc; text-decoration: none; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.5545454545454545; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: white; color: black; font-family: 'Droid Sans'; font-size: 16px; font-style: italic; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Web server:</span><span style="background-color: white; color: black; font-family: 'Droid Sans'; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"> Apache, nginx, Tornado, </span><span style="background-color: transparent; color: black; font-family: 'Droid Sans'; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Node.js</span><span style="background-color: white; color: black; font-family: 'Droid Sans'; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">...</span></div>
</li>
<li dir="ltr" style="background-color: white; color: black; font-family: 'Droid Sans'; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; list-style-type: disc; text-decoration: none; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.5545454545454545; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: white; color: black; font-family: 'Droid Sans'; font-size: 16px; font-style: italic; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Database:</span><span style="background-color: white; color: black; font-family: 'Droid Sans'; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"> MariaDB, MongoDB, CouchDB, Neo4j…</span></div>
</li>
<li dir="ltr" style="background-color: white; color: black; font-family: 'Droid Sans'; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; list-style-type: disc; text-decoration: none; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.5545454545454545; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: white; color: black; font-family: 'Droid Sans'; font-size: 16px; font-style: italic; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Mail server:</span><span style="background-color: white; color: black; font-family: 'Droid Sans'; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"> Dovecot, Axigen, deepOfix...</span></div>
</li>
<li dir="ltr" style="background-color: white; color: black; font-family: 'Droid Sans'; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; list-style-type: disc; text-decoration: none; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.5545454545454545; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: white; color: black; font-family: 'Droid Sans'; font-size: 16px; font-style: italic; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Background processing:</span><span style="background-color: white; color: black; font-family: 'Droid Sans'; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"> Gearman, RabbitMQ, Beanstalkd...</span></div>
</li>
<li dir="ltr" style="background-color: white; color: black; font-family: 'Droid Sans'; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; list-style-type: disc; text-decoration: none; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.5545454545454545; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: white; color: black; font-family: 'Droid Sans'; font-size: 16px; font-style: italic; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">PubSub:</span><span style="background-color: white; color: black; font-family: 'Droid Sans'; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"> Redis, Parse...</span></div>
</li>
<li dir="ltr" style="background-color: white; color: black; font-family: 'Droid Sans'; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; list-style-type: disc; text-decoration: none; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.5545454545454545; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: white; color: black; font-family: 'Droid Sans'; font-size: 16px; font-style: italic; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Search engine:</span><span style="background-color: white; color: black; font-family: 'Droid Sans'; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"> Elasticsearch, Sphinx, Solr...</span></div>
</li>
<li dir="ltr" style="background-color: white; color: black; font-family: 'Droid Sans'; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; list-style-type: disc; text-decoration: none; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.5545454545454545; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: white; color: black; font-family: 'Droid Sans'; font-size: 16px; font-style: italic; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Caching:</span><span style="background-color: white; color: black; font-family: 'Droid Sans'; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"> Varnish, Memcached, APC / OpCache....</span></div>
</li>
<li dir="ltr" style="background-color: white; color: black; font-family: 'Droid Sans'; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; list-style-type: disc; text-decoration: none; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.5545454545454545; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: white; color: black; font-family: 'Droid Sans'; font-size: 16px; font-style: italic; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Monitoring:</span><span style="background-color: white; color: black; font-family: 'Droid Sans'; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"> Nagios, SolarWinds, OpManager...</span></div>
</li>
</ul>
<br /><span style="background-color: white; font-family: 'Droid Sans'; font-size: 16px; vertical-align: baseline; white-space: pre-wrap;">Một hệ thống web có thể bao gồm nhiều thành phần, phân tán ra nhiều đám mây, chạy trên nhiều OS, sử dụng nhiều loại databases, web servers và áp dụng nhiều kiểu caching. Developers lần đầu tiếp cận một tổ hợp công nghệ có thể phải mất hàng tuần để setup environment mà chưa chắc đã thành công. </span><br />
<span style="background-color: white; font-family: 'Droid Sans'; font-size: 16px; vertical-align: baseline; white-space: pre-wrap;"><br /></span>
<span style="background-color: white; font-family: 'Droid Sans'; font-size: 16px; vertical-align: baseline; white-space: pre-wrap;"><br /></span>
<div dir="ltr" style="line-height: 1.5545454545454545; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: white; color: black; font-family: 'Droid Sans'; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">May mắn thay, chúng ta có thể giải quyết tất cả những điều đó bằng một concept: "virtualization".</span></div>
<span style="background-color: white; font-family: 'Droid Sans'; font-size: 16px; vertical-align: baseline; white-space: pre-wrap;"><b id="docs-internal-guid-91d21c1e-832c-3fab-2c23-4d0c9f6f4c04" style="font-weight: normal;"><br /></b></span>
<div dir="ltr" style="line-height: 1.5545454545454545; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: white; color: black; font-family: 'Droid Sans'; font-size: 19px; font-style: normal; font-variant: normal; font-weight: bold; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Đã đến lúc nói tạm biệt với localhost!</span></div>
<span style="background-color: white; font-family: 'Droid Sans'; font-size: 16px; vertical-align: baseline; white-space: pre-wrap;"><b style="font-weight: normal;"><br /></b></span>
<div dir="ltr" style="line-height: 1.5545454545454545; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: white; color: black; font-family: 'Droid Sans'; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Mở file cấu hình database connection trong dự án mới nhất của bạn, nếu có chữ "localhost" đâu đó thì hãy cẩn thận: có thể bạn vẫn chưa sẵn sàng cho sân chơi cloud computing, clustering và cross-platform. Nó cũng giống như một web developer sau 3 năm làm việc với PHP/MySQL mà vẫn dùng XAMP vậy. Nó có nghĩa là bạn đang chạy tất cả các services trên cùng một máy. Nó có nghĩa là ứng dụng của bạn đang vận hành trên một hệ sinh thái không giống chút nào với thực tế ngoài kia.</span></div>
<span style="background-color: white; font-family: 'Droid Sans'; font-size: 16px; vertical-align: baseline; white-space: pre-wrap;"><b style="font-weight: normal;"><br /></b></span>
<div dir="ltr" style="line-height: 1.5545454545454545; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: white; color: black; font-family: 'Droid Sans'; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Không có 2 hệ thống hoàn toàn giống nhau. Developer phải có khả năng thiết kế environment đặc thù cho từng hệ thống, và phải tìm cách tách biệt các dịch vụ khác nhau ra các servers khác nhau. Đó là khu biệt hóa chức năng để tối ưu hóa performance. Ít nhất cũng nên để ứng dụng web ở máy chủ dịch vụ web, còn database ở trên server chuyên về lưu trữ. Tại vì:</span></div>
<span style="background-color: white; font-family: 'Droid Sans'; font-size: 16px; vertical-align: baseline; white-space: pre-wrap;"><b style="font-weight: normal;"><br /></b></span>
<div dir="ltr" style="line-height: 1.5545454545454545; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: white; color: black; font-family: 'Droid Sans'; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">- Nếu server chỉ cung cấp một service duy nhất, bạn có thể yên tâm áp dụng cấu hình tốt nhất cho riêng service đó.</span></div>
<div dir="ltr" style="line-height: 1.5545454545454545; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: white; color: black; font-family: 'Droid Sans'; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">- Dễ dàng thực thi các thao tác backup, replicate... trên máy chủ database, cũng như scaling máy chủ ứng dụng web.</span></div>
<span style="background-color: white; font-family: 'Droid Sans'; font-size: 16px; vertical-align: baseline; white-space: pre-wrap;"><b style="font-weight: normal;"><br /></b></span>
<div dir="ltr" style="line-height: 1.5545454545454545; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: white; color: black; font-family: 'Droid Sans'; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Cấu hình database connection nên có những IP addresses thay vì chỉ "localhost" hay "127.0.0.1".</span></div>
<span style="background-color: white; font-family: 'Droid Sans'; font-size: 16px; vertical-align: baseline; white-space: pre-wrap;"><b style="font-weight: normal;"><br /></b></span>
<div dir="ltr" style="line-height: 1.5545454545454545; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: white; color: black; font-family: 'Droid Sans'; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Để làm điều đó thì bạn không nên install mọi thứ đồ nghề lên PC một cách trực tiếp, mà hãy tạo ra các máy ảo và cài đặt tools trên máy ảo. </span></div>
<span style="background-color: white; font-family: 'Droid Sans'; font-size: 16px; vertical-align: baseline; white-space: pre-wrap;"><b style="font-weight: normal;"><br /></b></span>
<div dir="ltr" style="line-height: 1.5545454545454545; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: white; color: black; font-family: 'Droid Sans'; font-size: 19px; font-style: normal; font-variant: normal; font-weight: bold; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Virtualize it! Hãy ảo hóa môi trường dev của bạn!</span></div>
<span style="background-color: white; font-family: 'Droid Sans'; font-size: 16px; vertical-align: baseline; white-space: pre-wrap;"><b style="font-weight: normal;"><br /></b></span>
<div dir="ltr" style="line-height: 1.5545454545454545; margin-bottom: 0pt; margin-top: 0pt; text-align: center;">
<span style="background-color: white; color: black; font-family: 'Droid Sans'; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><img alt="SSH to virtual web server.png" height="397px;" src="https://lh4.googleusercontent.com/gQtMxoo2iK3DAJVbab_EzzfGWtkwQ_MI66s7sCyrn3Y_x4SFPkfyBEUtm78ayJVxDMsW7CiJIgzG39d9s6MTKQHudsrCvVlUvg-vJo5YJbC3pn3ab-lNK2OfnlSYveUTp7I" style="-webkit-transform: rotate(0.00rad); border: none; transform: rotate(0.00rad);" width="707px;" /></span></div>
<div dir="ltr" style="line-height: 1.5545454545454545; margin-bottom: 0pt; margin-top: 0pt; text-align: center;">
<span style="background-color: white; color: black; font-family: 'Droid Sans'; font-size: 16px; font-style: italic; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Figure 1 : Kết nối vào máy ảo bằng Terminal</span></div>
<span style="background-color: white; font-family: 'Droid Sans'; font-size: 16px; vertical-align: baseline; white-space: pre-wrap;"><b style="font-weight: normal;"><br /></b></span>
<div dir="ltr" style="line-height: 1.5545454545454545; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: white; color: black; font-family: 'Droid Sans'; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Điều này giúp bạn:</span></div>
<span style="background-color: white; font-family: 'Droid Sans'; font-size: 16px; vertical-align: baseline; white-space: pre-wrap;"><b style="font-weight: normal;"><br /></b></span>
<ul style="margin-bottom: 0pt; margin-top: 0pt;">
<li dir="ltr" style="background-color: white; color: black; font-family: 'Droid Sans'; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; list-style-type: disc; text-decoration: none; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.5545454545454545; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: white; color: black; font-family: 'Droid Sans'; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">giữ cho máy tính luôn sạch sẽ: vì mọi thứ chỉ hoạt động trong sandbox. Tắt máy ảo là xong. Đặc biệt nếu là máy tính riêng, chắc hẳn bạn không muốn tốn resource để giữ nginx và mongodb chạy trong khi đang xem YouTube.</span></div>
</li>
<li dir="ltr" style="background-color: white; color: black; font-family: 'Droid Sans'; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; list-style-type: disc; text-decoration: none; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.5545454545454545; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: white; color: black; font-family: 'Droid Sans'; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">dễ dàng thay đổi môi trường dev: bạn có thể dev 1 dự án đang chạy CentOS và 1 dự án khác dùng Windows Server mà không cần rời xa giao diện Mac OS và các software quen thuộc.</span></div>
</li>
<li dir="ltr" style="background-color: white; color: black; font-family: 'Droid Sans'; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; list-style-type: disc; text-decoration: none; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.5545454545454545; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: white; color: black; font-family: 'Droid Sans'; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">thao tác với máy ảo ở local cũng giống như với các máy ảo trên AWS, Azure, WebFaction... Bạn sẽ không phải lúng túng khi được quăng cho 1 cái EC2 instance mới. Xem các hình Figure 1 và Figure 2, hệ thống server trên EC2 được tái hiện trong hệ thống server ảo tại local.</span></div>
</li>
<li dir="ltr" style="background-color: white; color: black; font-family: 'Droid Sans'; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; list-style-type: disc; text-decoration: none; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.5545454545454545; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: white; color: black; font-family: 'Droid Sans'; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">có thể tạo ra hệ thống nhiều server với cấu hình và limit như trong thực tế. Ví dụ website của bạn dùng 3 con EC2 trong đó có 1 con m3.xLarge và 2 con m3.medium, bạn có thể tạo ra 3 máy ảo và set RAM, storage… y như vậy để test performance và khả năng đáp ứng. </span></div>
</li>
<li dir="ltr" style="background-color: white; color: black; font-family: 'Droid Sans'; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; list-style-type: disc; text-decoration: none; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.5545454545454545; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: white; color: black; font-family: 'Droid Sans'; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">và đây là điều quan trọng nhất: bạn có thể </span><span style="background-color: white; color: black; font-family: 'Droid Sans'; font-size: 16px; font-style: normal; font-variant: normal; font-weight: bold; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">clone máy ảo ra cho nhiều người khác</span><span style="background-color: white; color: black; font-family: 'Droid Sans'; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"> cùng sử dụng. Mọi thứ đều consistent, không chút nào khác biệt.</span></div>
</li>
</ul>
<span style="background-color: white; font-family: 'Droid Sans'; font-size: 16px; vertical-align: baseline; white-space: pre-wrap;"><b style="font-weight: normal;"><br /></b></span>
<div dir="ltr" style="line-height: 1.5545454545454545; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: white; color: black; font-family: 'Droid Sans'; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Có nhiều công cụ giúp bạn tạo máy ảo, như VMware, VirtualBox, OpenVZ, Xen... ở đây chủ yếu nhắc đến VirtualBox, vì công cụ này chạy được trên cả Windows, Mac và Linux. Về cách cài đặt và sử dụng VirtualBox, các bạn có thể tham khảo chi tiết tại link dưới:</span></div>
<span style="background-color: white; font-family: 'Droid Sans'; font-size: 16px; vertical-align: baseline; white-space: pre-wrap;"><b style="font-weight: normal;"><br /></b></span>
<div dir="ltr" style="line-height: 1.5545454545454545; margin-bottom: 0pt; margin-top: 0pt;">
<a href="https://www.virtualbox.org/manual/UserManual.html" style="text-decoration: none;"><span style="background-color: white; color: #1155cc; font-family: 'Droid Sans'; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: underline; vertical-align: baseline; white-space: pre-wrap;">https://www.virtualbox.org/manual/UserManual.html</span></a></div>
<span style="background-color: white; font-family: 'Droid Sans'; font-size: 16px; vertical-align: baseline; white-space: pre-wrap;"><b style="font-weight: normal;"><br /></b></span>
<div dir="ltr" style="line-height: 1.86545454545454; margin-bottom: 0pt; margin-top: 0pt; text-align: center;">
<span style="background-color: white; color: black; font-family: 'Droid Sans'; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><img alt="AWS EC2 instances.png" height="281px;" src="https://lh5.googleusercontent.com/hgWoBpJaL_9nrxqhsvPvR55Rrm5t7exg6IO_r20xmjjDPXi1t_iM-IkUyfl1wV19iP1FwfhwHq1eNwJVQDabTDwTjNm8VPBfG1AUCTBLWq-yxzpA3aGMIEVG9_SHE3yg4hM" style="-webkit-transform: rotate(0.00rad); border: none; transform: rotate(0.00rad);" width="707px;" /></span></div>
<div dir="ltr" style="line-height: 1.86545454545454; margin-bottom: 0pt; margin-top: 0pt; text-align: center;">
<span style="background-color: white; color: black; font-family: 'Droid Sans'; font-size: 16px; font-style: italic; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Figure 2 : Các instances trên AWS EC2</span></div>
<span style="background-color: white; font-family: 'Droid Sans'; font-size: 16px; vertical-align: baseline; white-space: pre-wrap;"><b style="font-weight: normal;"><br /></b></span><br />
<div dir="ltr" style="line-height: 1.86545454545454; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: white; color: black; font-family: 'Droid Sans'; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Nhưng trước hết hãy ghi nhớ một số khái niệm cần thiết khi làm việc với các công cụ ảo hóa.</span></div>
<span style="background-color: white; font-family: 'Droid Sans'; font-size: 16px; vertical-align: baseline; white-space: pre-wrap;"><b style="font-weight: normal;"><br /></b></span>
<div dir="ltr" style="line-height: 1.86545454545454; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: white; color: black; font-family: 'Droid Sans'; font-size: 19px; font-style: normal; font-variant: normal; font-weight: bold; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Các concepts trong visualizing</span></div>
<span style="background-color: white; font-family: 'Droid Sans'; font-size: 16px; vertical-align: baseline; white-space: pre-wrap;"><b style="font-weight: normal;"><br /></b></span>
<ul style="margin-bottom: 0pt; margin-top: 0pt;">
<li dir="ltr" style="background-color: white; color: black; font-family: 'Droid Sans'; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; list-style-type: disc; text-decoration: none; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.86545454545454; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: white; color: black; font-family: 'Droid Sans'; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">PM (physical machine) : máy tính vật lý của bạn</span></div>
</li>
</ul>
<ul style="margin-bottom: 0pt; margin-top: 0pt;">
<li dir="ltr" style="background-color: white; color: black; font-family: 'Droid Sans'; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; list-style-type: disc; text-decoration: none; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.86545454545454; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: white; color: black; font-family: 'Droid Sans'; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">VM (virtual machine) : máy ảo được tạo ra bên trong PMs, cô lập với môi trường của PMs</span></div>
</li>
<li dir="ltr" style="background-color: white; color: black; font-family: 'Droid Sans'; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; list-style-type: disc; text-decoration: none; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.86545454545454; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: white; color: black; font-family: 'Droid Sans'; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Host (host OS) : là hệ điều hành gốc trên PM.</span></div>
</li>
<li dir="ltr" style="background-color: white; color: black; font-family: 'Droid Sans'; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; list-style-type: disc; text-decoration: none; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.86545454545454; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: white; color: black; font-family: 'Droid Sans'; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Guest (guest OS) : hệ điều hành chạy trong VM.</span></div>
</li>
<li dir="ltr" style="background-color: white; color: black; font-family: 'Droid Sans'; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; list-style-type: disc; text-decoration: none; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.86545454545454; margin-bottom: 0pt; margin-top: 0pt;">
<a href="https://www.virtualbox.org/manual/ch04.html" style="text-decoration: none;"><span style="background-color: white; color: #1155cc; font-family: 'Droid Sans'; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: underline; vertical-align: baseline; white-space: pre-wrap;">Guest Additions</span></a><span style="background-color: white; color: black; font-family: 'Droid Sans'; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"> : phần mở rộng chức năng cho guest giống như drivers trên host.</span></div>
</li>
<li dir="ltr" style="background-color: white; color: black; font-family: 'Droid Sans'; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; list-style-type: disc; text-decoration: none; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.86545454545454; margin-bottom: 0pt; margin-top: 0pt;">
<a href="https://www.virtualbox.org/manual/ch04.html#sharedfolders" style="text-decoration: none;"><span style="background-color: white; color: #1155cc; font-family: 'Droid Sans'; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: underline; vertical-align: baseline; white-space: pre-wrap;">Shared folders</span></a><span style="background-color: white; color: black; font-family: 'Droid Sans'; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"> : các thư mục dùng chung giữa host và guest. Đây là khái niệm đặc biệt quan trọng, nhờ nó, bạn có thể lưu trữ, chỉnh sửa source code bằng IDE quen thuộc trên host OS, và run chúng trên guest OS. Chỉ có thể dùng Shared folders sau khi đã cài đặt Guest Additions cho VM.</span></div>
</li>
</ul>
<span style="background-color: white; font-family: 'Droid Sans'; font-size: 16px; vertical-align: baseline; white-space: pre-wrap;"><b style="font-weight: normal;"><br /></b></span>
<div dir="ltr" style="line-height: 1.86545454545454; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: white; color: black; font-family: 'Droid Sans'; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Sau đây, tôi đề cập một số bước nên làm khi ảo hóa môi trường dev.</span></div>
<span style="background-color: white; font-family: 'Droid Sans'; font-size: 16px; vertical-align: baseline; white-space: pre-wrap;"><b style="font-weight: normal;"><br /></b></span><br />
<div dir="ltr" style="line-height: 1.5545454545454545; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: white; color: black; font-family: 'Droid Sans'; font-size: 19px; font-style: normal; font-variant: normal; font-weight: bold; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Những điều nên làm với visualizing</span></div>
<span style="background-color: white; font-family: 'Droid Sans'; font-size: 16px; vertical-align: baseline; white-space: pre-wrap;"><b style="font-weight: normal;"><br /></b></span>
<div dir="ltr" style="line-height: 1.5545454545454545; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: white; color: black; font-family: 'Droid Sans'; font-size: 16px; font-style: normal; font-variant: normal; font-weight: bold; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">1, Tạo sẵn một bộ core</span></div>
<span style="background-color: white; font-family: 'Droid Sans'; font-size: 16px; vertical-align: baseline; white-space: pre-wrap;"><b style="font-weight: normal;"><br /></b></span>
<div dir="ltr" style="line-height: 1.5545454545454545; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: white; color: black; font-family: 'Droid Sans'; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Cài đặt một server lên máy ảo hoàn toàn giống như cài đặt trên máy vật lý. Bạn vẫn mất chừng đó thời gian để điền các thông tin và chờ đợi quá trình sao chép hệ điều hành lên hard disk hoàn tất. Vì vậy, bạn nên setup các bộ core trước. Đó là các máy ảo cài đặt sẵn Ubuntu Server, RedHad, CentOS... và chỉ có duy nhất hệ điều hành, không chứa gì khác. </span></div>
<span style="background-color: white; font-family: 'Droid Sans'; font-size: 16px; vertical-align: baseline; white-space: pre-wrap;"><b style="font-weight: normal;"><br /></b></span>
<div dir="ltr" style="line-height: 1.5545454545454545; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: white; color: black; font-family: 'Droid Sans'; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Bạn có thể chạy các lệnh update và upgrade lên version mới nhất, rồi install thêm 2 thứ: </span><span style="background-color: white; color: black; font-family: 'Droid Sans'; font-size: 16px; font-style: italic; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">git</span><span style="background-color: white; color: black; font-family: 'Droid Sans'; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"> và </span><span style="background-color: white; color: black; font-family: 'Droid Sans'; font-size: 16px; font-style: italic; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">openssh-server</span><span style="background-color: white; color: black; font-family: 'Droid Sans'; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">. Git là công cụ phải có để quản lý source code</span><span style="background-color: white; color: black; font-family: 'Droid Sans'; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">. OpenSSH-Server cho phép bạn login vào máy ảo này qua ssh. Dùng ssh trên cửa sổ terminal riêng tiện hơn là thao tác qua giao diện QEMU mặc định của máy ảo.</span></div>
<span style="background-color: white; font-family: 'Droid Sans'; font-size: 16px; vertical-align: baseline; white-space: pre-wrap;"><b style="font-weight: normal;"><br /></b></span>
<div dir="ltr" style="line-height: 1.5545454545454545; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: white; color: black; font-family: 'Droid Sans'; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Kế đó, bạn dùng chức năng export của VirtualBox để xuất ra các file nén OVA. Từ các files nén này, bạn có thể import trở lại VirtualBox để tạo ra các máy ảo mới.</span></div>
<span style="background-color: white; font-family: 'Droid Sans'; font-size: 16px; vertical-align: baseline; white-space: pre-wrap;"><b style="font-weight: normal;"><br /></b></span>
<div dir="ltr" style="line-height: 1.5545454545454545; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: white; color: black; font-family: 'Droid Sans'; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Tới đây, bạn đã có những server "ready-to-use". Chúng có thể bao gồm Ubuntu-core, RedHad-core, CentOS-core... Từ các bản standard này, bạn có thể phát triển theo nhiều nhánh: máy chủ dữ liệu, máy chủ web, file server, etc.</span></div>
<span style="background-color: white; font-family: 'Droid Sans'; font-size: 16px; vertical-align: baseline; white-space: pre-wrap;"><b style="font-weight: normal;"><br /></b></span>
<div dir="ltr" style="line-height: 1.8654544830322275; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: white; color: black; font-family: 'Droid Sans'; font-size: 16px; font-style: normal; font-variant: normal; font-weight: bold; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">2, Tạo ra các máy ảo chuyên dụng</span></div>
<span style="background-color: white; font-family: 'Droid Sans'; font-size: 16px; vertical-align: baseline; white-space: pre-wrap;"><b style="font-weight: normal;"><br /></b></span>
<div dir="ltr" style="line-height: 1.5545454545454545; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: white; color: black; font-family: 'Droid Sans'; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Giả sử bạn đi theo dòng Ubuntu, trước hết, bạn cần đem phiên bản Ubuntu-core import vào VirtualBox, đặt tên máy ảo mới là WebServer rồi login vào. Ở trong máy ảo WebServer này, bạn cài đặt nginx cho lắng nghe cổng 80, cài thêm Apache cho lắng nghe cổng 8080, cài Node.js, PhantomJS, và các đồ nghề cần thiết cho máy chủ web. Sau khi hoàn tất mọi thứ, đừng vội sử dụng mà hãy export ra một file OVA để tiện dùng lại sau này.</span></div>
<span style="background-color: white; font-family: 'Droid Sans'; font-size: 16px; vertical-align: baseline; white-space: pre-wrap;"><b style="font-weight: normal;"><br /></b></span>
<div dir="ltr" style="line-height: 1.5545454545454545; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: white; color: black; font-family: 'Droid Sans'; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Tương tự, cũng dùng Ubuntu-core để tạo ra 1 máy ảo khác gọi là DbServer chẳng hạn. Login vào máy này và install MongoDB, MariaDB... sau đó, cũng export ra một file OVA trước khi sử dụng.</span></div>
<span style="background-color: white; font-family: 'Droid Sans'; font-size: 16px; vertical-align: baseline; white-space: pre-wrap;"><b style="font-weight: normal;"><br /></b></span>
<div dir="ltr" style="line-height: 1.5545454545454545; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: white; color: black; font-family: 'Droid Sans'; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Tới đây, bạn đã có 3 files: Ubuntu-core.ova, WebServer.ova, và DbServer.ova. Thậm chí bạn có thể build sẵn những máy ảo chuyên biệt hơn, chẳng hạn MongoDB.ova, Neo4j.ova, nginx.ova, ApacheTomcat.ova, etc. Không có giới hạn nào cho khả năng sáng tạo của bạn. Mục tiêu duy nhất là làm cho việc setup môi trường trở nên nhanh chóng và hoàn hảo.</span></div>
<span style="background-color: white; font-family: 'Droid Sans'; font-size: 16px; vertical-align: baseline; white-space: pre-wrap;"><b style="font-weight: normal;"><br /></b></span>
<div dir="ltr" style="line-height: 1.5545454545454545; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: white; color: black; font-family: 'Droid Sans'; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><img alt="OVA files.png" height="173px;" src="https://lh6.googleusercontent.com/bSguqV3Gq82UfKDSHBJKUA3lZjPWvDjmd7yv5tx2IvWXAV5TSp6wVBwcpWdQNdOSXOP6Sh-50ai-Sp6IsbsRNkz2y1Jyy7WRDDtrDz3ovl-MAJyfrPS_4QzKiZmLn631-a4" style="-webkit-transform: rotate(0.00rad); border: none; transform: rotate(0.00rad);" width="707px;" /></span></div>
<div dir="ltr" style="line-height: 1.5545454545454545; margin-bottom: 0pt; margin-top: 0pt; text-align: center;">
<span style="background-color: white; color: black; font-family: 'Droid Sans'; font-size: 16px; font-style: italic; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Figure 3 : My .OVA files </span></div>
<span style="background-color: white; font-family: 'Droid Sans'; font-size: 16px; vertical-align: baseline; white-space: pre-wrap;"><b style="font-weight: normal;"><br /></b></span>
<div dir="ltr" style="line-height: 1.5545454545454545; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: white; color: black; font-family: 'Droid Sans'; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Bất kể ở thời điểm nào bạn cũng có thể dùng lại chúng để tạo ra máy chủ cần thiết trong vài phút. Nếu một team khác cũng cần dùng Neo4j, bạn chỉ việc share file Neo4j.ova để họ tự tạo ra máy ảo sẵn có Neo4j. Không cần phải làm gì thêm nữa! Một team khác cần máy chủ chạy Node.js 0.10.35, có Redis để chạy PubSub. OK. Bạn chỉ việc import WebServer.ova, tạo máy ảo mới, login vào, thêm 1 phút để install redis-server. Xong export ra thành NodeRedis.ova đưa cho họ sử dụng. Chưa bao giờ công việc trở nên dễ dàng hơn thế! Giả như họ cài đặt linh tinh làm server lỗi cũng không sao, cứ remove VM đó đi và import lại NodeRedis.ova trên một VM mới là được.</span></div>
<span style="background-color: white; font-family: 'Droid Sans'; font-size: 16px; vertical-align: baseline; white-space: pre-wrap;"><b style="font-weight: normal;"><br /></b></span><br />
<div dir="ltr" style="line-height: 1.5545454545454545; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: white; color: black; font-family: 'Droid Sans'; font-size: 16px; font-style: normal; font-variant: normal; font-weight: bold; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">4. Dùng static IP</span></div>
<span style="background-color: white; font-family: 'Droid Sans'; font-size: 16px; vertical-align: baseline; white-space: pre-wrap;"><b style="font-weight: normal;"><br /></b></span>
<div dir="ltr" style="line-height: 1.5545454545454545; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: white; color: black; font-family: 'Droid Sans'; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Các máy ảo nên được cấu hình sử dụng static IP để tránh phải điều chỉnh file hosts nhiều lần. Để biết IP hiện tại của máy ảo, bạn login vào guest và gõ lệnh </span><span style="background-color: white; color: black; font-family: 'Droid Sans'; font-size: 16px; font-style: italic; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">ifconfig</span><span style="background-color: white; color: black; font-family: 'Droid Sans'; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">. </span></div>
<span style="background-color: white; font-family: 'Droid Sans'; font-size: 16px; vertical-align: baseline; white-space: pre-wrap;"><b style="font-weight: normal;"><br /></b></span>
<div dir="ltr" style="line-height: 1.5545454545454545; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: white; color: black; font-family: 'Droid Sans'; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Thiết lập static IP bằng cách chỉnh sửa file </span><span style="background-color: white; color: black; font-family: 'Droid Sans'; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">/etc/network/interfaces. </span><span style="background-color: transparent; color: black; font-family: 'Droid Sans'; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Ví dụ sau dùng nano:</span></div>
<span style="background-color: white; font-family: 'Droid Sans'; font-size: 16px; vertical-align: baseline; white-space: pre-wrap;"><b style="font-weight: normal;"><br /></b></span>
<div dir="ltr" style="line-height: 1.5545454545454545; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: black; color: white; font-family: 'Droid Sans'; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">~ $ sudo nano /etc/network/interfaces</span></div>
<span style="background-color: white; font-family: 'Droid Sans'; font-size: 16px; vertical-align: baseline; white-space: pre-wrap;"><b style="font-weight: normal;"><br /></b></span>
<div dir="ltr" style="line-height: 1.5545454545454545; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: white; color: black; font-family: 'Droid Sans'; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Đây là một file mẫu chuẩn (thay X bằng 1 số bất kỳ, chú ý conflict):</span></div>
<span style="background-color: white; font-family: 'Droid Sans'; font-size: 16px; vertical-align: baseline; white-space: pre-wrap;"><b style="font-weight: normal;"><br /></b></span>
<div dir="ltr" style="line-height: 1.5545454545454545; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: white; color: #999999; font-family: 'Droid Sans'; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">/////////////////////////////////////////////////////////////////////</span></div>
<div dir="ltr" style="line-height: 1.5545454545454545; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: white; color: #999999; font-family: 'Droid Sans'; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">GNU nano 2.2.6 File: /etc/network/interfaces</span></div>
<span style="background-color: white; font-family: 'Droid Sans'; font-size: 16px; vertical-align: baseline; white-space: pre-wrap;"><b style="font-weight: normal;"><br /></b></span>
<div dir="ltr" style="line-height: 1.5545454545454545; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: white; color: #999999; font-family: 'Droid Sans'; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"># This file describes the network interfaces available on your system</span></div>
<div dir="ltr" style="line-height: 1.5545454545454545; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: white; color: #999999; font-family: 'Droid Sans'; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"># and how to activate them. For more information, see interfaces(5).</span></div>
<span style="background-color: white; font-family: 'Droid Sans'; font-size: 16px; vertical-align: baseline; white-space: pre-wrap;"><b style="font-weight: normal;"><br /></b></span>
<div dir="ltr" style="line-height: 1.5545454545454545; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: white; color: #999999; font-family: 'Droid Sans'; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"># The loopback network interface</span></div>
<div dir="ltr" style="line-height: 1.5545454545454545; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: white; color: #999999; font-family: 'Droid Sans'; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">auto lo</span></div>
<div dir="ltr" style="line-height: 1.5545454545454545; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: white; color: #999999; font-family: 'Droid Sans'; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">iface lo inet loopback</span></div>
<span style="background-color: white; font-family: 'Droid Sans'; font-size: 16px; vertical-align: baseline; white-space: pre-wrap;"><b style="font-weight: normal;"><br /></b></span>
<div dir="ltr" style="line-height: 1.5545454545454545; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: white; color: #999999; font-family: 'Droid Sans'; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"># The primary network interface</span></div>
<div dir="ltr" style="line-height: 1.5545454545454545; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: white; color: #999999; font-family: 'Droid Sans'; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">auto eth0</span></div>
<div dir="ltr" style="line-height: 1.5545454545454545; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: white; color: #999999; font-family: 'Droid Sans'; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">iface eth0 inet static</span></div>
<div dir="ltr" style="line-height: 1.5545454545454545; margin-bottom: 0pt; margin-top: 0pt;">
<span style="color: #999999;"><span style="background-color: white; font-family: 'Roboto Slab', 'Times New Roman', serif; font-size: 14px; line-height: 19px; white-space: pre-wrap;"> address 192.168.1.5</span><br style="background-color: white; font-family: 'Roboto Slab', 'Times New Roman', serif; font-size: 14px; line-height: 19px; white-space: pre-wrap;" /><span style="background-color: white; font-family: 'Roboto Slab', 'Times New Roman', serif; font-size: 14px; line-height: 19px; white-space: pre-wrap;"> gateway 192.168.1.1</span><br style="background-color: white; font-family: 'Roboto Slab', 'Times New Roman', serif; font-size: 14px; line-height: 19px; white-space: pre-wrap;" /><span style="background-color: white; font-family: 'Roboto Slab', 'Times New Roman', serif; font-size: 14px; line-height: 19px; white-space: pre-wrap;"> netmask 255.255.255.0</span><br style="background-color: white; font-family: 'Roboto Slab', 'Times New Roman', serif; font-size: 14px; line-height: 19px; white-space: pre-wrap;" /><span style="background-color: white; font-family: 'Roboto Slab', 'Times New Roman', serif; font-size: 14px; line-height: 19px; white-space: pre-wrap;"> broadcast 192.168.1.255</span></span></div>
<div dir="ltr" style="line-height: 1.5545454545454545; margin-bottom: 0pt; margin-top: 0pt;">
<span style="color: #999999;"># Using wifi<br style="background-color: white; font-family: 'Roboto Slab', 'Times New Roman', serif; font-size: 14px; line-height: 19px; white-space: pre-wrap;" /><span style="background-color: white; font-family: 'Roboto Slab', 'Times New Roman', serif; font-size: 14px; line-height: 19px; white-space: pre-wrap;"> # wpa-ssid </span></span><span style="background-color: white; color: #999999; font-family: 'Roboto Slab', 'Times New Roman', serif; font-size: 14px; line-height: 19px; white-space: pre-wrap;">WIFI_NAME</span><span style="color: #999999;"><br style="background-color: white; font-family: 'Roboto Slab', 'Times New Roman', serif; font-size: 14px; line-height: 19px; white-space: pre-wrap;" /><span style="background-color: white; font-family: 'Roboto Slab', 'Times New Roman', serif; font-size: 14px; line-height: 19px; white-space: pre-wrap;"> # wpa-psk PASSWORK_WIFI_HERE</span></span></div>
<div dir="ltr" style="line-height: 1.5545454545454545; margin-bottom: 0pt; margin-top: 0pt;">
<span style="color: #999999;"># Set DNS<br style="background-color: white; font-family: 'Roboto Slab', 'Times New Roman', serif; font-size: 14px; line-height: 19px; white-space: pre-wrap;" /><span style="background-color: white; font-family: 'Roboto Slab', 'Times New Roman', serif; font-size: 14px; line-height: 19px; white-space: pre-wrap;"> # dns-nameservers 8.8.8.8 8.8.4.4</span></span></div>
<div dir="ltr" style="line-height: 1.5545454545454545; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: white; color: #999999; font-family: 'Droid Sans'; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">/////////////////////////////////////////////////////////////////////</span></div>
<span style="background-color: white; font-family: 'Droid Sans'; font-size: 16px; vertical-align: baseline; white-space: pre-wrap;"><b style="font-weight: normal;"><br /></b></span>
<div dir="ltr" style="line-height: 1.5545454545454545; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: white; color: black; font-family: 'Droid Sans'; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Sau khi khởi động lại VM, bạn có thể connect đến guest OS này bằng SSH từ trên host OS:</span></div>
<span style="background-color: white; font-family: 'Droid Sans'; font-size: 16px; vertical-align: baseline; white-space: pre-wrap;"><b style="font-weight: normal;"><br /></b></span>
<div dir="ltr" style="line-height: 1.5545454545454545; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: black; color: white; font-family: 'Droid Sans'; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">~ $ ssh root@192.168.1.x</span></div>
<span style="background-color: white; font-family: 'Droid Sans'; font-size: 16px; vertical-align: baseline; white-space: pre-wrap;"><b style="font-weight: normal;"><br /></b></span><br />
<div dir="ltr" style="line-height: 1.5545454545454545; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: white; color: black; font-family: 'Droid Sans'; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Tham khảo thêm cơ chế networking của VirtualBox:</span></div>
<span style="background-color: white; font-family: 'Droid Sans'; font-size: 16px; vertical-align: baseline; white-space: pre-wrap;"><b style="font-weight: normal;"><br /></b></span>
<div dir="ltr" style="line-height: 1.5545454545454545; margin-bottom: 0pt; margin-top: 0pt;">
<a href="http://www.virtualbox.org/manual/ch06.html" style="text-decoration: none;"><span style="background-color: white; color: #1155cc; font-family: 'Droid Sans'; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: underline; vertical-align: baseline; white-space: pre-wrap;">http://www.virtualbox.org/manual/ch06.html</span></a></div>
<span style="background-color: white; font-family: 'Droid Sans'; font-size: 16px; vertical-align: baseline; white-space: pre-wrap;"><b style="font-weight: normal;"><br /></b></span><br />
<div dir="ltr" style="line-height: 1.5545454545454545; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: white; color: black; font-family: 'Droid Sans'; font-size: 16px; font-style: normal; font-variant: normal; font-weight: bold; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">5. Mouting và Symlink </span></div>
<span style="background-color: white; font-family: 'Droid Sans'; font-size: 16px; vertical-align: baseline; white-space: pre-wrap;"><b style="font-weight: normal;"><br /></b></span>
<div dir="ltr" style="line-height: 1.5545454545454545; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: white; color: black; font-family: 'Droid Sans'; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Để chạy source code của 1 website trên máy ảo, bạn nên mount thư mục chia sẻ vào một nơi cố định, chẳng hạn: /var/www/shared</span></div>
<span style="background-color: white; font-family: 'Droid Sans'; font-size: 16px; vertical-align: baseline; white-space: pre-wrap;"><b style="font-weight: normal;"><br /></b></span>
<div dir="ltr" style="line-height: 1.5545454545454545; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: white; color: black; font-family: 'Droid Sans'; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Nếu mounting thành công, bạn có thể thấy các thư mục web xuất hiện trong location này.</span></div>
<span style="background-color: white; font-family: 'Droid Sans'; font-size: 16px; vertical-align: baseline; white-space: pre-wrap;"><b style="font-weight: normal;"><br /></b></span>
<div dir="ltr" style="line-height: 1.5545454545454545; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: white; color: black; font-family: 'Droid Sans'; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Sau đó, bạn sẽ cấu hình server point tới đây như khi làm trên máy thực.</span></div>
<span style="background-color: white; font-family: 'Droid Sans'; font-size: 16px; vertical-align: baseline; white-space: pre-wrap;"><b style="font-weight: normal;"><br /></b></span>
<div dir="ltr" style="line-height: 1.5545454545454545; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: white; color: black; font-family: 'Droid Sans'; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Bạn cần để cho server script chạy trong guest OS có thể sửa đổi files/folders ở host OS (nằm dưới shared folder). Lệnh sau giúp mounting chính xác trên VM chạy Linux:</span></div>
<span style="background-color: white; font-family: 'Droid Sans'; font-size: 16px; vertical-align: baseline; white-space: pre-wrap;"><b style="font-weight: normal;"><br /></b></span>
<div dir="ltr" style="line-height: 1.5545454545454545; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: black; color: white; font-family: 'Droid Sans'; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">~ $ sudo mount -t vboxsf -o uid=1000,gid=1000 SHARED_FOLDER /MOUNT_PATH</span></div>
<span style="background-color: white; font-family: 'Droid Sans'; font-size: 16px; vertical-align: baseline; white-space: pre-wrap;"><b style="font-weight: normal;"><br /></b></span><br />
<div dir="ltr" style="line-height: 1.5545454545454545; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: white; color: black; font-family: 'Droid Sans'; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Một vấn đề thường gặp khác là symlink. VirtualBox không cho phép dùng symlink trong guest. Nếu bạn thực sự cần dùng symlink, hãy tham khảo:</span></div>
<span style="background-color: white; font-family: 'Droid Sans'; font-size: 16px; vertical-align: baseline; white-space: pre-wrap;"><b style="font-weight: normal;"><br /></b></span>
<div dir="ltr" style="line-height: 1.5545454545454545; margin-bottom: 0pt; margin-top: 0pt;">
<a href="http://askubuntu.com/questions/446317/how-to-make-guest-os-follow-symlinks-from-shared-folder" style="text-decoration: none;"><span style="background-color: white; color: #1155cc; font-family: 'Droid Sans'; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: underline; vertical-align: baseline; white-space: pre-wrap;">How to make Guest OS follow symlinks from shared folder</span></a></div>
<span style="background-color: white; font-family: 'Droid Sans'; font-size: 16px; vertical-align: baseline; white-space: pre-wrap;"><b style="font-weight: normal;"><br /></b></span>
<div dir="ltr" style="line-height: 1.5545454545454545; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: white; color: black; font-family: 'Droid Sans'; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Một số module Node.js tự động thiết lập symlink khi install. Điều này có thể gây ra lỗi. Tuy nhiên Node.js cung cấp tùy chọn -no-bind-links để ngăn chặn việc tạo symlinks:</span></div>
<span style="background-color: white; font-family: 'Droid Sans'; font-size: 16px; vertical-align: baseline; white-space: pre-wrap;"><b style="font-weight: normal;"><br /></b></span>
<div dir="ltr" style="line-height: 1.5545454545454545; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: black; color: white; font-family: 'Droid Sans'; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">~ $ sudo npm install --no-bind-links</span></div>
<span style="background-color: white; font-family: 'Droid Sans'; font-size: 16px; vertical-align: baseline; white-space: pre-wrap;"><b style="font-weight: normal;"><br /></b></span><br />
<div dir="ltr" style="line-height: 1.5545454545454545; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: white; color: black; font-family: 'Droid Sans'; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Tham khảo:</span></div>
<span style="background-color: white; font-family: 'Droid Sans'; font-size: 16px; vertical-align: baseline; white-space: pre-wrap;"><b style="font-weight: normal;"><br /></b></span>
<div dir="ltr" style="line-height: 1.5545454545454545; margin-bottom: 0pt; margin-top: 0pt;">
<a href="https://docs.npmjs.com/cli/install" style="text-decoration: none;"><span style="background-color: white; color: #1155cc; font-family: 'Droid Sans'; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: underline; vertical-align: baseline; white-space: pre-wrap;">https://docs.npmjs.com/cli/install</span></a></div>
<span style="background-color: white; font-family: 'Droid Sans'; font-size: 16px; vertical-align: baseline; white-space: pre-wrap;"><b style="font-weight: normal;"><br /></b></span><br />
<div dir="ltr" style="line-height: 1.5545454545454545; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: white; color: black; font-family: 'Droid Sans'; font-size: 16px; font-style: normal; font-variant: normal; font-weight: bold; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">6. Máy vật lý cũng nên có cấu trúc phù hợp</span></div>
<span style="background-color: white; font-family: 'Droid Sans'; font-size: 16px; vertical-align: baseline; white-space: pre-wrap;"><b style="font-weight: normal;"><br /></b></span>
<div dir="ltr" style="line-height: 1.5545454545454545; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: white; color: black; font-family: 'Droid Sans'; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Một khi đã áp dụng hệ thống máy ảo cho môi trường dev, vai trò của máy thực sẽ ít quan trọng hơn. Bạn có thể làm việc trên Windows, Linux hay Mac OS X tùy ý. Dù sao máy tính cho developer nên là multi boot chứa ít nhất 1 Windows và 1 Linux, có phân vùng chung giữa các OS này.</span></div>
<span style="background-color: white; font-family: 'Droid Sans'; font-size: 16px; vertical-align: baseline; white-space: pre-wrap;"><b style="font-weight: normal;"><br /></b></span>
<div dir="ltr" style="line-height: 1.5545454545454545; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: white; color: black; font-family: 'Droid Sans'; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Nhiều máy hiện nay vẫn áp dụng cách chia phân vùng ổ cứng truyền thống, thời Windows XP. Tôi nhớ là dạo đó người ta hay chia ổ cứng thành 4 phần : </span></div>
<span style="background-color: white; font-family: 'Droid Sans'; font-size: 16px; vertical-align: baseline; white-space: pre-wrap;"><b style="font-weight: normal;"><br /></b></span>
<ul style="margin-bottom: 0pt; margin-top: 0pt;">
<li dir="ltr" style="background-color: white; color: black; font-family: 'Droid Sans'; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; list-style-type: disc; text-decoration: none; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.5545454545454545; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: white; color: black; font-family: 'Droid Sans'; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">C: System chứa file hệ thống</span></div>
</li>
<li dir="ltr" style="background-color: white; color: black; font-family: 'Droid Sans'; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; list-style-type: disc; text-decoration: none; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.5545454545454545; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: white; color: black; font-family: 'Droid Sans'; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">D: Data chứa dữ liệu công việc</span></div>
</li>
<li dir="ltr" style="background-color: white; color: black; font-family: 'Droid Sans'; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; list-style-type: disc; text-decoration: none; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.5545454545454545; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: white; color: black; font-family: 'Droid Sans'; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">E: Entertainment chứa phim ảnh, game, nhạc…</span></div>
</li>
</ul>
<span style="background-color: white; font-family: 'Droid Sans'; font-size: 16px; vertical-align: baseline; white-space: pre-wrap;"><b style="font-weight: normal;"><br /></b></span>
<div dir="ltr" style="line-height: 1.5545454545454545; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: white; color: black; font-family: 'Droid Sans'; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Developer phần mềm thì không nên làm như vậy. Theo kinh nghiệm của tôi, với 1 ổ cứng bất kỳ, chúng ta nên phân chia như sau:</span></div>
<span style="background-color: white; font-family: 'Droid Sans'; font-size: 16px; vertical-align: baseline; white-space: pre-wrap;"><b style="font-weight: normal;"><br /></b></span>
<ul style="margin-bottom: 0pt; margin-top: 0pt;">
<li dir="ltr" style="background-color: white; color: black; font-family: 'Droid Sans'; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; list-style-type: disc; text-decoration: none; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.5545454545454545; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: white; color: black; font-family: 'Droid Sans'; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Partition 1 (30% dung lượng): Windows OS, 7 hay 8 tùy cấu hình máy</span></div>
</li>
<li dir="ltr" style="background-color: white; color: black; font-family: 'Droid Sans'; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; list-style-type: disc; text-decoration: none; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.5545454545454545; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: white; color: black; font-family: 'Droid Sans'; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Partition 2 (30% dung lượng): Linux, Ubuntu hoặc Linux Mint</span></div>
</li>
<li dir="ltr" style="background-color: white; color: black; font-family: 'Droid Sans'; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; list-style-type: disc; text-decoration: none; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.5545454545454545; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: white; color: black; font-family: 'Droid Sans'; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Partition 3 (38% dung lượng): Storage, FAT32, chứa dữ liệu mà cả Windows và Linux có thể truy cập. Các files OVAs, source code, libraries/packages… hãy để ở đây.</span></div>
</li>
<li dir="ltr" style="background-color: white; color: black; font-family: 'Droid Sans'; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; list-style-type: disc; text-decoration: none; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.5545454545454545; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: white; color: black; font-family: 'Droid Sans'; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">2% dung lượng còn lại dùng cho hệ thống, như swap, EFI, etc.</span></div>
</li>
</ul>
<span style="background-color: white; font-family: 'Droid Sans'; font-size: 16px; vertical-align: baseline; white-space: pre-wrap;"><b style="font-weight: normal;"><br /></b></span>
<div dir="ltr" style="line-height: 1.5545454545454545; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: white; color: black; font-family: 'Droid Sans'; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Tôi không rõ Norton Ghost có thể tạo ra các bản ghost multi boot như: Win7-Mint, Win8-Ubuntu, Win8-Mint-Solaris, etc… hay không. Nếu được vậy thì quá tốt!</span></div>
<span style="background-color: white; font-family: 'Droid Sans'; font-size: 16px; vertical-align: baseline; white-space: pre-wrap;"><b style="font-weight: normal;"><br /></b></span><br />
<div dir="ltr" style="line-height: 1.5545454545454545; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: white; color: black; font-family: 'Droid Sans'; font-size: 16px; font-style: normal; font-variant: normal; font-weight: bold; text-decoration: underline; vertical-align: baseline; white-space: pre-wrap;">Kết luận</span></div>
<span style="background-color: white; font-family: 'Droid Sans'; font-size: 16px; vertical-align: baseline; white-space: pre-wrap;"><b style="font-weight: normal;"><br /></b></span>
<div dir="ltr" style="line-height: 1.5545454545454545; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: white; color: black; font-family: 'Droid Sans'; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Trên đây là những định hướng trong việc áp dụng công nghệ máy ảo để tạo ra môi trường dev thông minh, linh hoạt, nhằm cải thiện hiệu suất công việc và nâng cao năng lực thiết kế, kiểm soát, vận hành hệ thống máy tính, máy chủ. Mức độ áp dụng vào thực tiễn như thế nào đòi hỏi sự mạnh dạn thay đổi nhận thức cũng như thói quen ở mỗi developer và những người quản lý. </span></div>
<br />
<span style="background-color: white; font-family: 'Droid Sans'; font-size: 16px; vertical-align: baseline; white-space: pre-wrap;"><br /></span>Dong Nguyenhttp://www.blogger.com/profile/08315900287977325135noreply@blogger.comDa Nang, Vietnam16.060330603153254 108.2029724121093815.938250603153254 108.04161091210938 16.182410603153254 108.36433391210937tag:blogger.com,1999:blog-4828609964961329038.post-49689649599150210352015-01-31T04:28:00.000+07:002015-02-01T01:10:35.786+07:00"Material Design" - Vài đặc tính và các resources nên biết<div style="background-color: white; color: #222222; font-family: arial, sans-serif; font-size: 12.8000001907349px;">
Khi trào lưu flat design do Microsoft và Apple khởi xướng có vẻ dịch chuyển sang phía bên kia của đỉnh cao, tháng 6 năm 2014, Google đã đem tới một triết lý khác trong thiết kế phần mềm, đó là "Material Design". </div>
<div style="background-color: white; color: #222222; font-family: arial, sans-serif; font-size: 12.8000001907349px;">
<br /></div>
<div style="background-color: white; color: #222222; font-family: arial, sans-serif; font-size: 12.8000001907349px;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-ammDeeXeEI4/VM0Y0QggfUI/AAAAAAAAHdo/ozS5jRpg5ZE/s1600/alarm_material_ui.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://2.bp.blogspot.com/-ammDeeXeEI4/VM0Y0QggfUI/AAAAAAAAHdo/ozS5jRpg5ZE/s1600/alarm_material_ui.gif" height="240" width="320" /></a></div>
<div style="background-color: white; color: #222222; font-family: arial, sans-serif; font-size: 12.8000001907349px;">
<br /></div>
<div style="background-color: white; color: #222222; font-family: arial, sans-serif; font-size: 12.8000001907349px;">
<br /></div>
<div style="background-color: white; color: #222222; font-family: arial, sans-serif; font-size: 12.8000001907349px;">
Từ đó đến cuối năm 2014, "material design" bắt đầu xuất hiện trong các sản phẩm mới của Google, như <a href="https://developer.android.com/design/material/index.html" style="color: #1155cc;" target="_blank">Android 5.0 Lollipop</a>, <a href="https://www.polymer-project.org/" style="color: #1155cc;" target="_blank">Polymer</a>... Hàng loạt ứng dụng web như Gmail, Google Drive, Google Keep... cũng đã được thiết kế lại. Và hiện giờ thì triết lý "Material Design" đã trở thành làn sóng cảm hứng sáng tạo mới cho các designers khắp thế giới. Như ngày 15/1 vừa rồi, <a href="https://twitter.com/14eleven" style="color: #1155cc;" target="_blank">Fyza Hashim</a>, nữ designer của Trello viết trên blog của công ty: "<a href="http://blog.trello.com/we-are-living-in-a-material-world-and-i-am-a-material-girl" style="color: #1155cc;" target="_blank">We Are Living In A Material World And I Am A Material Girl</a>". Đó là một bài viết mà các designers nên tham khảo vì trong đó Fyza nói rất rõ cách mà cô vận dụng triết lý "Material Deisgn" vào từng nhóm đối tượng UI và các hiệu ứng tương tác, dựa trên guidelines của Google. Ngoài ra, loạt bài "<a href="https://medium.com/android-design/understanding-material-design-4f9a59b1a63e" style="color: #1155cc;" target="_blank">Understanding Material Design</a>" của Raveesh Bhalla trên Medium cũng thuộc vào dạng must-read. </div>
<div style="background-color: white; color: #222222; font-family: arial, sans-serif; font-size: 12.8000001907349px;">
<br /></div>
<div style="background-color: white; color: #222222; font-family: arial, sans-serif; font-size: 12.8000001907349px;">
Để thêm một chút hình dung tư tưởng thẩm mỹ trong "Material Design". Mời các bạn xem qua video giới thiệu sau (48 giây):</div>
<div style="background-color: white; color: #222222; font-family: arial, sans-serif; font-size: 12.8000001907349px;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<iframe allowfullscreen="" class="YOUTUBE-iframe-video" data-thumbnail-src="https://ytimg.googleusercontent.com/vi/Q8TXgCzxEnw/0.jpg" frameborder="0" height="266" src="http://www.youtube.com/embed/Q8TXgCzxEnw?feature=player_embedded" width="320"></iframe></div>
<div style="background-color: white; color: #222222; font-family: arial, sans-serif; font-size: 12.8000001907349px;">
<br /></div>
<div style="background-color: white; color: #222222; font-family: arial, sans-serif; font-size: 12.8000001907349px;">
<br /></div>
<div style="background-color: white; color: #222222; font-family: arial, sans-serif; font-size: 12.8000001907349px;">
<br /></div>
<div style="background-color: white; color: #222222; font-family: arial, sans-serif; font-size: 12.8000001907349px;">
"Material Design" là hệ thống bao gồm thiết kế hiệu ứng thị giác, thiết kế chuyển động, và thiết kế tương tác, nhất quán đối với mọi thiết bị. Đây là điều kiện tiên quyết để một thiết kế được gọi là "Material Design". Nó phải như nhau trên mọi devices. Hiệu ứng khi user click vào 1 button trên web xảy ra như thế nào thì khi touch nó trên mobile cũng phải đúng như vậy. Trong thế giới của "Material Design", người ta không phải quan tâm đến các khái niệm responsive hay adaptive nữa. Bởi vì điều đó diễn ra một cách tự nhiên đúng như nó vốn phải thế.</div>
<div style="background-color: white; color: #222222; font-family: arial, sans-serif; font-size: 12.8000001907349px;">
<br /></div>
<div style="background-color: white; color: #222222; font-family: arial, sans-serif; font-size: 12.8000001907349px;">
<br /></div>
<div style="background-color: white; color: #222222; font-family: arial, sans-serif; font-size: 12.8000001907349px;">
Thiết kế theo triết lý "Material Design" là sắp xếp các đối tượng thiết kế vào trong một môi trường 3D. Dù bạn trông nó có vẻ phẳng, nhưng mọi đối tượng đều có 3 thuộc tính căn bản liên quan đến 3 chiều không gian: x, y và z. Trong môi trường 3D đó, có 2 khái niệm khác mà designers phải quan tâm: ánh sáng (Light) và bóng đổ (Shadow).</div>
<div style="background-color: white; color: #222222; font-family: arial, sans-serif; font-size: 12.8000001907349px;">
<br /></div>
<div style="background-color: white; color: #222222; font-family: arial, sans-serif; font-size: 12.8000001907349px;">
Vì triết lý "Material Design" phản ánh thế giới thực nên các đối tượng trong nó cũng có một số đặc tính vật lý bất biến và những cách thức phản ứng cố hữu đối với lực tương tác từ bên ngoài. Có thể tóm tắt như sau:</div>
<div style="background-color: white; color: #222222; font-family: arial, sans-serif; font-size: 12.8000001907349px;">
<br /></div>
<div style="background-color: white; color: #222222; font-family: arial, sans-serif; font-size: 12.8000001907349px;">
- Đối với 3 thuộc tính x, y và z thì x và y là hay thay đổi, còn z cố định. Không bao giờ có đối tượng mà độ dày bằng 0 (hiểu đơn giản tức là mọi vật thể đều có 3 chiều vật lý, shadow luôn tồn tại). </div>
<div style="background-color: white; color: #222222; font-family: arial, sans-serif; font-size: 12.8000001907349px;">
<br /></div>
<div style="background-color: white; color: #222222; font-family: arial, sans-serif; font-size: 12.8000001907349px;">
- Khi bạn đặt 1 element lên trên 1 element khác thì phải có shadow thể hiện rõ điều đó. Ở đây xuất hiện một khái niệm gọi là "cao độ" (Elevation). Cao độ này quyết định phạm vi của bóng đổ bên dưới. Element càng được nâng cao lên khỏi element bên dưới thì bóng của nó càng lan rộng. Bên cạnh elevation, cũng có "resting elevation", quyết định hình dạng của bóng đổ bên dưới.</div>
<div style="background-color: white; color: #222222; font-family: arial, sans-serif; font-size: 12.8000001907349px;">
<br /></div>
<div style="background-color: white; color: #222222; font-family: arial, sans-serif; font-size: 12.8000001907349px;">
- Các đối tượng không được uốn cong hoặc gấp lại. Kiểu như hiệu ứng lật trang sách không thuộc "Material Design". Cũng không có chuyện element này xuyên qua element kia.</div>
<div style="background-color: white; color: #222222; font-family: arial, sans-serif; font-size: 12.8000001907349px;">
<br /></div>
<div style="background-color: white; color: #222222; font-family: arial, sans-serif; font-size: 12.8000001907349px;">
- Giữa các đối tượng có quan hệ mật thiết với nhau về không gian tồn tại. Khi một đối tượng dịch chuyển, các đối tượng xung quanh sẽ chịu tác động vật lý. Tùy theo cách bố trí, các đối tượng cũng thừa kế lẫn nhau thuộc tính của chúng. Designers phải "keep in mind" vấn đề này khi thiết kế motion và hiệu ứng tương tác trên giao diện.</div>
<div style="background-color: white; color: #222222; font-family: arial, sans-serif; font-size: 12.8000001907349px;">
<br /></div>
<div style="background-color: white; color: #222222; font-family: arial, sans-serif; font-size: 12.8000001907349px;">
Để làm nổi bật các đặc điểm vật lý trên, "Material Design" thường sử dụng các gam màu đậm và các mảng màu phẳng đặt sát nhau. Hiệu ứng blury cũng có chỗ đứng nhất định ở các phần không gian giao nhau.</div>
<div style="background-color: white; color: #222222; font-family: arial, sans-serif; font-size: 12.8000001907349px;">
<br /></div>
<div style="background-color: white; color: #222222; font-family: arial, sans-serif; font-size: 12.8000001907349px;">
<br /></div>
<div style="background-color: white; color: #222222; font-family: arial, sans-serif; font-size: 12.8000001907349px;">
Triết lý "Material Design" đặc biệt chú trọng đến tính "meaningful" của hiệu ứng chuyển tiếp và chuyển động. Có một số quy ước như sau:</div>
<div style="background-color: white; color: #222222; font-family: arial, sans-serif; font-size: 12.8000001907349px;">
<br /></div>
<div style="background-color: white; color: #222222; font-family: arial, sans-serif; font-size: 12.8000001907349px;">
- Phản ứng bề mặt (surface reaction): khi click/touch lên 1 đối tượng, sẽ xuất hiện hiệu ứng giúp nhận biết tác động đã diễn ra trên bề mặt đối tượng đó.</div>
<div style="background-color: white; color: #222222; font-family: arial, sans-serif; font-size: 12.8000001907349px;">
<br /></div>
<div style="background-color: white; color: #222222; font-family: arial, sans-serif; font-size: 12.8000001907349px;">
- Hình ảnh tiếp diễn (visual continuity): các chuyển tiếp dẫn đến thay đổi về trạng thái nên rõ ràng, loại trừ mọi cảm giác khó chịu/khó hiểu đối với người sử dụng. Chẳng hạn click vào 1 button, không nên bụp 1 cái hiện ra dialog, mà phải biểu đạt được mối quan hệ nhân-quả giữa cái click trước đó với giao diện dialog đang mở ra.</div>
<div style="background-color: white; color: #222222; font-family: arial, sans-serif; font-size: 12.8000001907349px;">
<br /></div>
<div style="background-color: white; color: #222222; font-family: arial, sans-serif; font-size: 12.8000001907349px;">
Trong 2 ví dụ dưới đây, tính "meaningful transition" có khác biệt rất dễ thấy:</div>
<div style="background-color: white; color: #222222; font-family: arial, sans-serif; font-size: 12.8000001907349px;">
<br /></div>
<div style="background-color: white; color: #222222; font-family: arial, sans-serif; font-size: 12.8000001907349px;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<iframe allowfullscreen='allowfullscreen' webkitallowfullscreen='webkitallowfullscreen' mozallowfullscreen='mozallowfullscreen' width='320' height='266' src='https://www.blogger.com/video.g?token=AD6v5dzzTDD7bHJwg0JnLj7hvhq1ABLGq-BC5JdS93g09mT9qSFKXKrJK3ZAfb15IaW-3oGSCpLi2BO_brYF3VbZ1A' class='b-hbp-video b-uploaded' frameborder='0'></iframe></div>
<div class="separator" style="clear: both; text-align: center;">
- Good -</div>
<div style="background-color: white; color: #222222; font-family: arial, sans-serif; font-size: 12.8000001907349px;">
<br /></div>
<div style="background-color: white; color: #222222; font-family: arial, sans-serif; font-size: 12.8000001907349px;">
<br /></div>
<div style="background-color: white; color: #222222; font-family: arial, sans-serif; font-size: 12.8000001907349px;">
<br /></div>
<div style="background-color: white; color: #222222; font-family: arial, sans-serif; font-size: 12.8000001907349px;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<iframe allowfullscreen='allowfullscreen' webkitallowfullscreen='webkitallowfullscreen' mozallowfullscreen='mozallowfullscreen' width='320' height='266' src='https://www.blogger.com/video.g?token=AD6v5dxnXoYVav8zTTpBXSw6NTsfaSZod-xpYQE5EtzHgXZN7lmWa9vhvL5LuEQlF_ublty8JzhNrLxwQygx4HiZdw' class='b-hbp-video b-uploaded' frameborder='0'></iframe></div>
<div class="separator" style="clear: both; text-align: center;">
- Bad -</div>
<div style="background-color: white; color: #222222; font-family: arial, sans-serif; font-size: 12.8000001907349px;">
<br /></div>
<div style="background-color: white; color: #222222; font-family: arial, sans-serif; font-size: 12.8000001907349px;">
<br /></div>
<div style="background-color: white; color: #222222; font-family: arial, sans-serif; font-size: 12.8000001907349px;">
- Khi trình diễn một dãy chuyển động, các chuyển động phải có tính tuần tự thuận theo quan sát tự nhiên của người dùng. Chuyển động phải nhịp nhàng, các thời điểm trong toàn bộ tiến trình chuyển động phải liên kết chặt chẽ và được sắp xếp có chủ ý. Mọi chuyển động ngẫu nhiên bất thường (haphazard motion) phải bị loại bỏ. Quan sát 2 ví dụ sau. Mẫu đầu tiên hợp lý hơn vì các hình vuông xuất hiện theo đúng trải nghiệm thị giác phổ thông: từ trái sang phải, từ trên xuống dưới.<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<iframe allowfullscreen='allowfullscreen' webkitallowfullscreen='webkitallowfullscreen' mozallowfullscreen='mozallowfullscreen' width='320' height='266' src='https://www.blogger.com/video.g?token=AD6v5dxdlXZB0fCH5ohQXCwUb_KP3r9s5C6fI7RFNxH3FJfvi931TRWLJ59s3iO07I-s-yhQeA_MLbIbhi0or2K0yg' class='b-hbp-video b-uploaded' frameborder='0'></iframe></div>
<div class="separator" style="clear: both; text-align: center;">
- Good -</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /><iframe allowfullscreen='allowfullscreen' webkitallowfullscreen='webkitallowfullscreen' mozallowfullscreen='mozallowfullscreen' width='320' height='266' src='https://www.blogger.com/video.g?token=AD6v5dwBKI-NRF3UblFFu0MF3boQJOLyGEjL22VL8Z_Ya5r365no7Dt7PTknxicmi-2rLlf9Na_fyCppDsRRLRryMQ' class='b-hbp-video b-uploaded' frameborder='0'></iframe></div>
<div class="separator" style="clear: both; text-align: center;">
- Bad -</div>
<br />
<br /></div>
<div style="background-color: white; color: #222222; font-family: arial, sans-serif; font-size: 12.8000001907349px;">
<br /></div>
<div style="background-color: white; color: #222222; font-family: arial, sans-serif; font-size: 12.8000001907349px;">
Các nguyên tắc về phối màu, sử dụng font chữ, icons, layout và components được trình bày rất rõ trong bản đặc tả về "Material Design" của Google, kèm theo nhiều ví dụ minh họa dễ hiểu. Mời các bạn designers tham khảo tại:</div>
<div style="background-color: white; color: #222222; font-family: arial, sans-serif; font-size: 12.8000001907349px;">
<br /></div>
<div style="background-color: white; color: #222222; font-family: arial, sans-serif; font-size: 12.8000001907349px;">
<a href="http://google.com/design/spec" style="color: #3367d6; font-family: RobotoDraft, Helvetica, Arial, sans-serif; font-size: 16px; line-height: 24px;" target="_blank">Material design specification</a></div>
<div style="background-color: white; color: #222222; font-family: arial, sans-serif; font-size: 12.8000001907349px;">
<br /></div>
<div style="background-color: white; color: #222222; font-family: arial, sans-serif; font-size: 12.8000001907349px;">
Ngoài ra, video "<a href="http://youtu.be/isYZXwaP3Q4" style="color: #1155cc;" target="_blank">Google I/O 2014 - Material design principles</a>" có sự góp mặt của Matias Duarte, giám đốc thiết kế ở Google sẽ bổ sung thêm những kiến thức xung quanh:</div>
<div style="background-color: white; color: #222222; font-family: arial, sans-serif; font-size: 12.8000001907349px;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<iframe allowfullscreen="" class="YOUTUBE-iframe-video" data-thumbnail-src="https://ytimg.googleusercontent.com/vi/isYZXwaP3Q4/0.jpg" frameborder="0" height="266" src="http://www.youtube.com/embed/isYZXwaP3Q4?feature=player_embedded" width="320"></iframe></div>
<div style="background-color: white; color: #222222; font-family: arial, sans-serif; font-size: 12.8000001907349px;">
<br /></div>
<div style="background-color: white; color: #222222; font-family: arial, sans-serif; font-size: 12.8000001907349px;">
<br /></div>
<div style="background-color: white; color: #222222; font-family: arial, sans-serif; font-size: 12.8000001907349px;">
Trên thực tế, Matias đã nuôi nấng một triết lý mới trong thiết kế từ những năm 2011, mà chúng ta có thể thấy bóng dáng tư tưởng "Material Design" trong một vài sản phẩm Google từ dạo đó. Nhưng phải đến 2014 anh và các cộng sự mới hoàn thiện được lý thuyết và chính thức công bố ra thế giới.</div>
<div style="background-color: white; color: #222222; font-family: arial, sans-serif; font-size: 12.8000001907349px;">
<br /></div>
<div style="background-color: white; color: #222222; font-family: arial, sans-serif; font-size: 12.8000001907349px;">
<br /></div>
<div style="background-color: white; color: #222222; font-family: arial, sans-serif; font-size: 12.8000001907349px;">
Đối với front-end developers, câu chuyện xem ra khá thuận lợi. Đã có không ít bộ công cụ được xây dựng với chủ đích hỗ trợ các thiết kế dựa trên triết lý "Material Design", mà dự án <a href="https://www.polymer-project.org/" style="color: #1155cc;" target="_blank">Polymer</a> là tiên phong. </div>
<div style="background-color: white; color: #222222; font-family: arial, sans-serif; font-size: 12.8000001907349px;">
<br /></div>
<div style="background-color: white; color: #222222; font-family: arial, sans-serif; font-size: 12.8000001907349px;">
<a href="https://www.polymer-project.org/" style="color: #1155cc;" target="_blank">https://www.polymer-project.<wbr></wbr>org/</a></div>
<div style="background-color: white; color: #222222; font-family: arial, sans-serif; font-size: 12.8000001907349px;">
<br /></div>
<div style="background-color: white; color: #222222; font-family: arial, sans-serif; font-size: 12.8000001907349px;">
Polymer là dự án của Google nhằm đẩy nhanh việc áp dụng chuẩn Web Components vào thực tiễn. Các concepts về Web Components được mô tả lần đầu trong bản <a href="http://www.w3.org/TR/2012/WD-components-intro-20120522/" style="color: #1155cc;" target="_blank">draft của W3C</a> từ giữa năm 2012.</div>
<div style="background-color: white; color: #222222; font-family: arial, sans-serif; font-size: 12.8000001907349px;">
<br /></div>
<div style="background-color: white; color: #222222; font-family: arial, sans-serif; font-size: 12.8000001907349px;">
Nếu bạn còn xa lạ với Web Components, hãy thử <a href="http://materializecss.com/getting-started.html" style="color: #1155cc;" target="_blank">MaterializeCSS</a> :</div>
<div style="background-color: white; color: #222222; font-family: arial, sans-serif; font-size: 12.8000001907349px;">
<br /></div>
<div style="background-color: white; color: #222222; font-family: arial, sans-serif; font-size: 12.8000001907349px;">
<a href="http://materializecss.com/getting-started.html" style="color: #1155cc;" target="_blank">http://materializecss.com/<wbr></wbr>getting-started.html</a></div>
<div style="background-color: white; color: #222222; font-family: arial, sans-serif; font-size: 12.8000001907349px;">
<br /></div>
<div style="background-color: white; color: #222222; font-family: arial, sans-serif; font-size: 12.8000001907349px;">
MaterializeCSS dùng các tags truyền thống để markup. </div>
<div style="background-color: white; color: #222222; font-family: arial, sans-serif; font-size: 12.8000001907349px;">
<br /></div>
<div style="background-color: white; color: #222222; font-family: arial, sans-serif; font-size: 12.8000001907349px;">
<br /></div>
<div style="background-color: white; color: #222222; font-family: arial, sans-serif; font-size: 12.8000001907349px;">
<a href="http://material-ui.com/" style="color: #1155cc;" target="_blank">Material-UI</a> là một tập components được 1 Việt kiều tên là <a href="https://twitter.com/haicea" style="color: #1155cc;" target="_blank">Hai Nguyen</a> xây dựng cho dự án <a href="https://www.call-em-all.com/" style="color: #1155cc;" target="_blank">Call-Em-All</a> mà anh đồng sáng lập. </div>
<div style="background-color: white; color: #222222; font-family: arial, sans-serif; font-size: 12.8000001907349px;">
<br /></div>
<div style="background-color: white; color: #222222; font-family: arial, sans-serif; font-size: 12.8000001907349px;">
<a href="http://material-ui.com/" style="color: #1155cc;" target="_blank">http://material-ui.com/</a></div>
<div style="background-color: white; color: #222222; font-family: arial, sans-serif; font-size: 12.8000001907349px;">
<br /></div>
<div style="background-color: white; color: #222222; font-family: arial, sans-serif; font-size: 12.8000001907349px;">
CSS framework này dùng semantic tags và có <a href="https://www.npmjs.com/package/material-ui" style="color: #1155cc;" target="_blank">Node.js module</a> đem "Material Design" đến với <a href="http://facebook.github.io/react/" style="color: #1155cc;" target="_blank">React</a>.</div>
<div style="background-color: white; color: #222222; font-family: arial, sans-serif; font-size: 12.8000001907349px;">
<br /></div>
<div style="background-color: white; color: #222222; font-family: arial, sans-serif; font-size: 12.8000001907349px;">
<br /></div>
<div style="background-color: white; color: #222222; font-family: arial, sans-serif; font-size: 12.8000001907349px;">
Nếu bạn quen thuộc với Bootstrap thì đây là một phiên bản Bootstrap dùng cho "Material Design":</div>
<div style="background-color: white; color: #222222; font-family: arial, sans-serif; font-size: 12.8000001907349px;">
<br /></div>
<div style="background-color: white; color: #222222; font-family: arial, sans-serif; font-size: 12.8000001907349px;">
<a href="http://fezvrasta.github.io/bootstrap-material-design/" style="color: #1155cc;" target="_blank">http://fezvrasta.github.io/<wbr></wbr>bootstrap-material-design/</a></div>
<div style="background-color: white; color: #222222; font-family: arial, sans-serif; font-size: 12.8000001907349px;">
<br /></div>
<div style="background-color: white; color: #222222; font-family: arial, sans-serif; font-size: 12.8000001907349px;">
<br /></div>
<div style="background-color: white; color: #222222; font-family: arial, sans-serif; font-size: 12.8000001907349px;">
Tin rằng, những resources trên sẽ giúp các front-end developers dễ dàng biến những thiết kế "Matirial Design" trở thành hiện thực.</div>
<div style="background-color: white; color: #222222; font-family: arial, sans-serif; font-size: 12.8000001907349px;">
<br /></div>
<div style="background-color: white; color: #222222; font-family: arial, sans-serif; font-size: 12.8000001907349px;">
<br /></div>
<div style="background-color: white;">
<span style="background-color: transparent; font-size: 12.8000001907349px;"><span style="color: #222222; font-family: arial, sans-serif;"><b>Lời kết</b></span></span></div>
<div style="background-color: white;">
<span style="color: #222222; font-family: arial, sans-serif;"><span style="font-size: 12.8000001907349px;"><br /></span></span></div>
<div style="background-color: white;">
<span style="background-color: transparent; font-size: 12.8000001907349px;"><span style="color: #222222; font-family: arial, sans-serif;">Ở</span></span><span style="color: #222222; font-family: arial, sans-serif;"><span style="font-size: 12.8000001907349px;"> nơi triết lý "Material Design" có sự kết hợp giữa quan điểm minimalist trong "flat design" với phong cách skeuomorphism trong "ornamental design". "Material Design" cũng đơn giản hóa các đối tượng như "flat design", nhưng vẫn cố gắng phản ánh hiện thực thông qua các biểu tượng ẩn dụng (metaphor). </span></span><span style="background-color: transparent; font-size: 12.8000001907349px;"><span style="color: #222222; font-family: arial, sans-serif;">Tuy nhiên điều mà tôi thích thú nhất ở "Material Design", </span></span><span style="background-color: transparent; font-size: 12.8000001907349px;"><span style="color: #222222; font-family: arial, sans-serif;">cũng là điều khiến tôi không thích "flat design", </span></span><span style="background-color: transparent;"><span style="color: #222222; font-family: arial, sans-serif;"><span style="font-size: 12.8000001907349px;">chỉ đơn giản là hiệu ứng bóng đổ. </span></span></span><span style="background-color: transparent; font-size: 12.8000001907349px;"><span style="color: #222222; font-family: arial, sans-serif;">Tôi đặc biệt ưa thích </span></span><span style="color: #222222; font-family: arial, sans-serif; font-size: 12.8000001907349px;">hiệu ứng bóng đổ</span><span style="background-color: transparent; font-size: 12.8000001907349px;"><span style="color: #222222; font-family: arial, sans-serif;">. "Flat design" hủy diệt chúng, và giờ đây "Material Design" đã đem chúng trở về. </span></span><span style="background-color: transparent; font-size: 12.8000001907349px;"><span style="color: #222222; font-family: arial, sans-serif;">Đó là điều tuyệt vời nhất!</span></span></div>
<div style="background-color: white;">
<br /></div>
<div style="background-color: white;">
<span style="color: #222222; font-family: arial, sans-serif;"><span style="font-size: 12.8000001907349px;"><br /></span></span></div>
Dong Nguyenhttp://www.blogger.com/profile/08315900287977325135noreply@blogger.comtag:blogger.com,1999:blog-4828609964961329038.post-45036322531234498392013-10-08T22:07:00.000+07:002015-03-19T21:43:44.498+07:00Cài đặt NodeJS trên WebFaction server<br />
NodeJS gần như là tùy chọn mặc định cho các web application hoạt động trên thời gian thực. Cài đặt và sử dụng NodeJS không khó, nhưng cài đặt lên các đám mây như <a href="http://aws.amazon.com/" target="_blank">AWS</a>, <a href="https://c9.io/" target="_blank">Cloud9 IDE</a>, <a href="https://www.webfaction.com/" target="_blank">WebFaction</a>, <a href="https://modulus.io/" target="_blank">ModolusIO</a>... lại là những câu chuyện hoàn toàn khác. Mỗi hệ thống này được thiết kế một kiểu, cấu hình và platform của chúng khác nhau, phiên bản ứng dụng, ngôn ngữ cũng rất khác biệt.<br />
<br />
Cái tôi cần là một server chạy NodeJS và có <a href="https://npmjs.org/package/forever" target="_blank">Forever</a> để giữ nó chạy liên tục. Phải mất tới 3 tiếng mày mò, install và uninstall vài lần, tôi mới tạo được NodeJS server như ý muốn trên <a href="https://www.webfaction.com/" target="_blank">WebFaction</a>. Lần đầu tiên, tôi clone thẳng repository của <a href="https://github.com/joyent/node" target="_blank">NodeJS từ GitHub</a> về <a href="https://www.webfaction.com/" target="_blank">WebFaction</a>, gói này đã có sẵn <a href="https://npmjs.org/" target="_blank">NPM</a> nhưng khi cài đặt <a href="https://npmjs.org/package/forever" target="_blank">Forever</a> bằng lệnh install của npm thì nhận được <a href="https://github.com/isaacs/npm/issues/3885" target="_blank">thông báo lỗi "shasum check failed"</a> mà khá nhiều người gặp phải. Gỡ bỏ NPM và cài lại <a href="https://npmjs.org/" target="_blank">bằng gói chính thức</a> cũng không ăn thua. Cài lại NodeJS bằng <a href="http://nodejs.org/download/" target="_blank">bản tar.gz</a>, sau đó cài thêm NPM cũng gặp một số vấn đề khác. Sau cùng, tôi uninstall toàn bộ những gì đã cài đặt và thực hiện lại quá trình 4 bước rất đơn giản như sau :<br />
<br />
<br />
<span style="font-size: large;"><b>1. Tạo application có port riêng</b></span><br />
<br />
Từ WebFaction dashboard, tôi <a href="https://my.webfaction.com/new-application" target="_blank">tạo 1 application mới</a> để chạy dịch vụ NodeJS.<br />
<br />
Ở đây tôi thiết lập app là Custom app (listening on port) để WebFaction mở ra một cổng cho NodeJS về sau.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-2AfZb7DTni4/UlQXx81QOiI/AAAAAAAADA4/sYjxGIX2FpA/s1600/Create+new+application.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="211" src="http://2.bp.blogspot.com/-2AfZb7DTni4/UlQXx81QOiI/AAAAAAAADA4/sYjxGIX2FpA/s400/Create+new+application.png" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Kết quả, tôi có một application mới với tên <b>node</b>. Chú ý cổng được cấp phát là <b>13166</b>. NodeJS server sẽ nói chuyện với các clients qua cổng này.</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-m1nM8ZwdcDA/UlQXyBFMldI/AAAAAAAADA8/znrRqBaF3a4/s1600/Node+application.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="207" src="http://4.bp.blogspot.com/-m1nM8ZwdcDA/UlQXyBFMldI/AAAAAAAADA8/znrRqBaF3a4/s400/Node+application.png" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<br />
<span style="font-size: large;"><b>2. Cài đặt NodeJS</b></span><br />
<br />
Bây giờ, tôi mở command line và đăng nhập tài khoản WebFaction qua SSH, đưa con trỏ vào webapps/node, tạo thêm thư mục src để lấy source về cài đặt :<br />
<br />
<span style="color: #741b47;">$ cd webapps/node/</span><br />
<span style="color: #741b47;">mkdir src</span><br />
<span style="color: #741b47;">cd src</span><br />
<span style="color: #741b47;">curl http://nodejs.org/dist/node-latest.tar.gz | tar xz --strip-components=1</span><br />
<span style="color: #741b47;">./configure --prefix=$HOME</span><br />
<span style="color: #741b47;">make install</span><br />
<br />
Note :<br />
<br />
- Tham số --prefix=$HOME chỉ định hệ thống sao chép chương trình Node vào ~/bin/<br />
- Cài đặt NodeJS yêu cầu phải có Python 2.6 trở lên. Gói account WebFaction của tôi được cấp phát máy chủ chạy Python 2.7, do đó không cần quan tâm đến vấn đề này. Một số tài khoản WebFaction khác chạy phiên bản Python cũ hơn yêu cầu sẽ phải dùng lệnh <i>alias</i> để fake thông số phiên bản Python. Các bạn có thể tham khảo chi tiết trong <a href="http://stackoverflow.com/questions/18687850/setting-up-node-js-on-webfaction" target="_blank">hướng dẫn của Akseli Palén trên StackOverflow</a>.<br />
<br />
Tiến trình cài đặt NodeJS của tôi chỉ diễn ra trong vài phút. Sau khi hoàn tất, tôi gõ lệnh <i>node -v</i> để kiểm tra lại phiên bản NodeJS. Mọi thứ suôn sẻ.<br />
<br />
<br />
<span style="font-size: large;"><b>3. Cài đặt NPM</b></span><br />
<br />
NPM là chương trình được thiết kế để quản lý các modules chạy trên server NodeJS. Đó là thứ không thể thiếu được. Tôi dùng dòng lệnh sau để cài đặt :<br />
<br />
<span style="color: #741b47;">curl https://npmjs.org/install.sh | sh</span><br />
<br />
<a href="https://twitter.com/izs" target="_blank">Isaac</a> hay ai đó ở <a href="http://www.joyent.com/" target="_blank">Joyent</a> đã thay đổi giao thức HTTP cũ bằng HTTPS. Một số hướng dẫn trên mạng dùng đường dẫn trước đây sẽ không chạy.<br />
<br />
<br />
<span style="font-size: large;"><b>4. Cài đặt Forever</b></span><br />
<br />
Với NodeJS, chúng ta thường chạy nó qua command line, nhưng khi đóng cửa sổ command line, server sẽ tắt. Để giữ NodeJS server chạy suốt, người ta thường sử dụng một daemon tool nào đó hỗ trợ tự động kiểm tra và kích hoạt lại NodeJS server khi bị tắt ngoài ý muốn. <a href="https://npmjs.org/package/forever" target="_blank">Forever </a>được tạo ra để duy trì trạng thái running của server NodeJS. Đã có NPM, việc cài đặt <a href="https://npmjs.org/package/forever" target="_blank">Forever</a> rất đơn giản :<br />
<br />
<span style="color: #741b47;">npm install -g forever</span><br />
<br />
<br />
Kết quả cuối cùng như hình dưới. Không có error nào cả :D<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-2XdkSP3I7Vw/UlQTd8IvsCI/AAAAAAAADAw/EpyFAu3YPOw/s1600/Install+Nodejs+on+WebFactional+Server.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="435" src="http://2.bp.blogspot.com/-2XdkSP3I7Vw/UlQTd8IvsCI/AAAAAAAADAw/EpyFAu3YPOw/s640/Install+Nodejs+on+WebFactional+Server.png" width="640" /></a></div>
<br />
<br />
Vậy là xong, mọi thứ đã sẵn sàng để tôi build các ứng dụng NodeJS trên WebFaction server của tôi.<br />
<br />
<br />Dong Nguyenhttp://www.blogger.com/profile/08315900287977325135noreply@blogger.comtag:blogger.com,1999:blog-4828609964961329038.post-66168677898360829022013-09-21T20:49:00.002+07:002013-09-21T23:16:25.320+07:00Myzone - Một hệ thống mạng bách khoa toàn thư xã hội<div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><i><br /></i></span>
<span style="background-color: transparent; font-family: Arial; font-size: 15px; font-variant: normal; font-weight: normal; vertical-align: baseline; white-space: pre-wrap;"><i>Ngày 28/10 tới, <a href="http://greenglobal.vn/" target="_blank"><span style="color: blue;">Green Global</span></a> chúng tôi sẽ release một hệ thống mạng xã hội có tên là <a href="http://youlook.net/" target="_blank"><span style="color: blue;">YouLook</span></a>. Hệ thống YouLook đã được phát triển từ 1 năm trước dưới code name Myzone. </i></span><br />
<span style="background-color: transparent; font-family: Arial; font-size: 15px; font-variant: normal; font-weight: normal; vertical-align: baseline; white-space: pre-wrap;"><i><br /></i></span>
<span style="background-color: transparent; font-family: Arial; font-size: 15px; font-variant: normal; font-weight: normal; vertical-align: baseline; white-space: pre-wrap;"><i>Bài viết này giới thiệu với các bạn những nét khái quát về core concept của Myzone, về các mô hình mạng xã hội, về cuộc chiến giữa các bách khoa toàn thư... Nội dung trích từ một tài liệu do chính tôi đang chấp bút. </i></span><br />
<span style="background-color: transparent; font-family: Arial; font-size: 15px; font-variant: normal; font-weight: normal; vertical-align: baseline; white-space: pre-wrap;"><i><br /></i></span></div>
<div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
</div>
<div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Myzone xuất phát từ những ý tưởng giản dị và thiết thực. Cái đích Myzone hướng đến là trở thành một mạng xã hội kiểu mới, dựa trên các nguyên lý về tích hợp và cải biến.</span><br />
<span style="font-family: Arial; font-size: 15px; line-height: 1.15; white-space: pre-wrap;"><br /></span>
<span style="font-family: Arial; font-size: 15px; line-height: 1.15; white-space: pre-wrap;">Thế nào là một mạng xã hội kiểu mới và điều gì đem đến sự khác biệt cho Myzone? Ngay từ khi bắt đầu giai đoạn brainstorming, chúng tôi đã có nhiều tranh luận sôi nổi về những hình thái mạng xã hội phổ biến.</span><br />
<span style="font-family: Arial; font-size: 15px; line-height: 1.15; white-space: pre-wrap;"><br /></span>
<span style="font-family: Arial; font-size: 15px; line-height: 1.15; white-space: pre-wrap;">Các nghiên cứu của chúng tôi cho thấy hiện nay trên thế giới có ít nhất 8 kiểu mạng xã hội. Mỗi kiểu mạng xã hội này đều có một yếu tố phía sau đóng vai trò hạt nhân gắn kết các mối quan hệ ở tầng người dùng. Yếu tố đó chúng tôi gọi là "nền tảng quan hệ".</span><br />
<span style="color: black; font-family: Arial; font-size: 15px; font-style: italic; line-height: 1.15; vertical-align: baseline; white-space: pre-wrap;"><br /></span>
<span style="color: black; font-family: Arial; font-size: 15px; line-height: 1.15; vertical-align: baseline; white-space: pre-wrap;">- </span><span style="color: black; font-family: Arial; font-size: 15px; font-style: italic; line-height: 1.15; vertical-align: baseline; white-space: pre-wrap;">Social network</span><span style="color: black; font-family: Arial; font-size: 15px; line-height: 1.15; vertical-align: baseline; white-space: pre-wrap;"> : như Facebook, LinkedIn… vận động xung quanh những liên hệ trực tiếp có tính chất cá nhân hoặc nghề nghiệp.</span><br />
<span style="color: black; font-family: Arial; font-size: 15px; font-style: italic; line-height: 1.15; vertical-align: baseline; white-space: pre-wrap;"><br /></span>
<span style="color: black; font-family: Arial; font-size: 15px; font-style: italic; line-height: 1.15; vertical-align: baseline; white-space: pre-wrap;">- Social news</span><span style="color: black; font-family: Arial; font-size: 15px; line-height: 1.15; vertical-align: baseline; white-space: pre-wrap;"> : như Digg, Google+... tin tức sự kiện là trọng tâm của các hoạt động diễn ra trên các mạng xã hội này. Thành viên của họ chia sẻ với nhau những tin tức nóng hổi - thường ở dạng link tham chiếu tới các trang bên ngoài.</span><br />
<span style="color: black; font-family: Arial; font-size: 15px; font-style: italic; line-height: 1.15; vertical-align: baseline; white-space: pre-wrap;"><br /></span>
<span style="color: black; font-family: Arial; font-size: 15px; font-style: italic; line-height: 1.15; vertical-align: baseline; white-space: pre-wrap;">- Interest network</span><span style="color: black; font-family: Arial; font-size: 15px; line-height: 1.15; vertical-align: baseline; white-space: pre-wrap;"> : như StumbleUpon, Pinterest... vận hành xung quanh các nhóm sở thích.</span><br />
<span style="color: black; font-family: Arial; font-size: 15px; font-style: italic; line-height: 1.15; vertical-align: baseline; white-space: pre-wrap;"><br /></span>
<span style="color: black; font-family: Arial; font-size: 15px; font-style: italic; line-height: 1.15; vertical-align: baseline; white-space: pre-wrap;">- Bookmarking</span><span style="color: black; font-family: Arial; font-size: 15px; line-height: 1.15; vertical-align: baseline; white-space: pre-wrap;"> : như Twitter, Digg… làm việc trên các địa chỉ web.</span><br />
<span style="color: black; font-family: Arial; font-size: 15px; font-style: italic; line-height: 1.15; vertical-align: baseline; white-space: pre-wrap;"><br /></span>
<span style="color: black; font-family: Arial; font-size: 15px; font-style: italic; line-height: 1.15; vertical-align: baseline; white-space: pre-wrap;">- Media sharing</span><span style="color: black; font-family: Arial; font-size: 15px; line-height: 1.15; vertical-align: baseline; white-space: pre-wrap;"> : như YouTube, Flickr… loại hình này hoạt động xung quanh một số dạng tài nguyên multimedia có thể chia sẻ được qua môi trường web.</span><br />
<span style="color: black; font-family: Arial; font-size: 15px; font-style: italic; line-height: 1.15; vertical-align: baseline; white-space: pre-wrap;"><br /></span>
<span style="color: black; font-family: Arial; font-size: 15px; font-style: italic; line-height: 1.15; vertical-align: baseline; white-space: pre-wrap;">- Blogging/Forum</span><span style="color: black; font-family: Arial; font-size: 15px; line-height: 1.15; vertical-align: baseline; white-space: pre-wrap;"> : như Blogspot, Wordpress… lưu trữ chia sẻ các article được viết theo cảm quan và trải nghiệm cá nhân.</span><br />
<span style="color: black; font-family: Arial; font-size: 15px; font-style: italic; line-height: 1.15; vertical-align: baseline; white-space: pre-wrap;"><br /></span>
<span style="color: black; font-family: Arial; font-size: 15px; font-style: italic; line-height: 1.15; vertical-align: baseline; white-space: pre-wrap;">- Co-developer</span><span style="color: black; font-family: Arial; font-size: 15px; line-height: 1.15; vertical-align: baseline; white-space: pre-wrap;"> : như GitHub, Koding… kết nối developers với nhau xung quanh các platform và source code.</span><br />
<span style="color: black; font-family: Arial; font-size: 15px; font-style: italic; line-height: 1.15; vertical-align: baseline; white-space: pre-wrap;"><br /></span>
<span style="color: black; font-family: Arial; font-size: 15px; font-style: italic; line-height: 1.15; vertical-align: baseline; white-space: pre-wrap;">- Ask and answer</span><span style="color: black; font-family: Arial; font-size: 15px; line-height: 1.15; vertical-align: baseline; white-space: pre-wrap;"> : như Quora, StackOverflow… kết nối newbies và experts quanh các vấn đề chuyên môn khác.</span><br />
<span style="font-family: Arial; font-size: 15px; line-height: 1.15; white-space: pre-wrap;"><br /></span>
<span style="font-family: Arial; font-size: 15px; line-height: 1.15; white-space: pre-wrap;">Nền tảng quan hệ là cái gì đó chung nhất giữa tất cả mọi người dùng trên một mạng xã hội, phản ánh mối quan tâm chung của các thành viên, và thường là core concept của mạng xã hội đó. Tất cả user trên Facebook đều quan tâm đến các friends. Users của YouTube quan tâm đến các videos. Users trên Twitter quan tâm đến các links… Nền tảng quan hệ tạo ra mạch sống xuyên suốt, giúp cho người dùng trong mạng xã hội liên kết với nhau, không ngừng tương tác trên nó và mở rộng quan hệ ra xung quanh nhằm thu được nhiều hơn những cái họ muốn.</span></div>
<div dir="ltr" style="margin-bottom: 0pt; margin-top: 0pt;">
<div style="line-height: 1.15;">
<span style="font-family: Arial; font-size: 15px; line-height: 1.15; white-space: pre-wrap;"><br /></span>
<span style="font-family: Arial; font-size: 15px; line-height: 1.15; white-space: pre-wrap;">Chúng tôi tin rằng để làm nên sự khác biệt so với những mạng xã hội đang tồn tại, Myzone nhất thiết phải tìm ra cho chính nó một nền tảng quan hệ thật mới mẻ.</span></div>
<div style="line-height: 1.15;">
<span style="font-family: Arial; font-size: 15px; line-height: 1.15; white-space: pre-wrap;"><br /></span>
<span style="font-family: Arial; font-size: 15px; line-height: 1.15; white-space: pre-wrap;">Và chúng tôi quyết định chọn Kiến thức. </span><br />
<br />
<div style="text-align: center;">
<span style="font-family: Arial; line-height: 27px; white-space: pre-wrap;"><b>Kiến thức là nền tảng quan hệ trong Myzone</b></span></div>
</div>
<div style="line-height: 1.15;">
<span style="font-family: Arial; font-size: 15px; line-height: 1.15; white-space: pre-wrap;"><br /></span></div>
<div class="separator" style="clear: both; line-height: 1.15; text-align: center;">
<a href="http://3.bp.blogspot.com/-wKic6Wq2xH4/Uj2pve5SniI/AAAAAAAAC38/WQF5il5Mkt8/s1600/Interest-Graph.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="240" src="http://3.bp.blogspot.com/-wKic6Wq2xH4/Uj2pve5SniI/AAAAAAAAC38/WQF5il5Mkt8/s320/Interest-Graph.jpg" width="320" /></a></div>
<div class="separator" style="clear: both; line-height: 1.15; text-align: center;">
<br /></div>
<div style="text-align: center;">
<span style="font-family: Arial;"><span style="font-size: 15px; line-height: 17px; white-space: pre-wrap;"><i>Đồ thị kết nối con người với tri thức - Ảnh : <a href="http://yourstory.in/2012/05/understanding-user-interest-graphs-the-future-of-commerce/" target="_blank"><span style="color: blue;">yourstory.in</span></a></i></span></span></div>
</div>
<div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="font-family: Arial; font-size: 15px; line-height: 1.15; white-space: pre-wrap;"><br /></span>
<span style="font-family: Arial; font-size: 15px; line-height: 1.15; white-space: pre-wrap;">Để đi đến quyết định ấy, chúng tôi đã lùi lại 200 năm trước, khi mà công nghiệp in ấn còn đang rất thịnh vượng. Bấy giờ có một nguồn tham khảo kiến thức hàn lâm được cả thế giới đánh giá cao và sử dụng như tài liệu khoa học chính thống: Báck khoa toàn thư Encyclopedia Britannica. Bộ sách đồ sộ này hiện diện trong thư phòng của hầu như mọi học giả, các nhà quý tộc và chính khách. Giới thượng lưu xem nó như biểu tượng của tri thức khoa học. Giai đoạn lịch sử mà đế chế bách khoa toàn thư Encyclopedia Britannica ngự trị đã kéo dài từ 1768 cho đến mãi những năm 1990 mới bị đe dọa bởi một thế lực non trẻ.</span></div>
<div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="font-family: Arial; font-size: 15px; line-height: 1.15; white-space: pre-wrap;"><br /></span>
<span style="font-family: Arial; font-size: 15px; line-height: 1.15; white-space: pre-wrap;">Đó là vào năm 1992, Bill Gates chính thức mua lại Funk & Wagnall và đưa nội dung kiến thức trong bách khoa toàn thư hạng xoàng này vào phiên bản đầu tiên của MSN Encarta. Trước đó, Bill đã ấp ủ ý tưởng làm ra một encyclopedia kỹ thuật số bằng nguồn nội dung lấy từ Encyclopedia Britannica, nhưng việc thương lượng hợp tác không thành công. Chất lượng nội dung của MSN Encarta không thể nào sánh bằng Encyclopedia Britannica nhưng bù lại, nó có hình ảnh, âm thanh sống động. Và điều tiên quyết là : thế giới đã bước sang kỷ nguyên PC. Chẳng mấy chốc, chiếc CD nhỏ bé đã dần thay thế vị trí của bộ sách đồ sộ. Những nỗ lực của Encyclopedia Britannica sau này đã không còn kịp để cứu vãn tình thế.</span><br />
<span style="font-family: Arial; font-size: 15px; line-height: 1.15; white-space: pre-wrap;"><br /></span>
<span style="font-family: Arial; font-size: 15px; line-height: 1.15; white-space: pre-wrap;">Suốt nhiều năm sau đó, MSN Encarta hiện diện trong hầu hết các máy tính cài Windows. Thành công của Windows đã đem MSN Encarta đi khắp thế giới, len lỏi vào mọi gia đình, trường học. MSN Encarta trở kẻ thống trị vương quốc bách khoa tri thức nhân loại cho đến khi Wikipedia xuất hiện.</span><br />
<span style="color: black; font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;"><br /></span>
<span style="color: black; font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;">Tháng 9 năm 2000, Jimmy Wales và Larry Sanger bắt tay vào xây dựng một bách khoa toàn thư trực tuyến trong dự án có tên Nupedia, thuộc công ty </span><a href="http://en.wikipedia.org/wiki/Bomis" style="line-height: 1.15; text-decoration: none;"><span style="color: #1155cc; font-family: Arial; font-size: 15px; text-decoration: underline; vertical-align: baseline; white-space: pre-wrap;">Bomis</span></a><span style="color: black; font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;">. Sau đó, họ tách Wikipedia ra khỏi Nupedia và chính thức công bố thành lập Wikipedia.org vào ngày 15/1/2001. Chỉ có một ngôn ngữ là tiếng Anh.</span><br />
<span style="font-family: Arial; font-size: 15px; line-height: 1.15; white-space: pre-wrap;"><br /></span>
<span style="font-family: Arial; font-size: 15px; line-height: 1.15; white-space: pre-wrap;">Open, free và dễ truy cập. Số lượng contributors, articles và languages không ngừng tăng trưởng. Đó cũng là lúc thế giới bước vào kỷ nguyên internet. Wikipedia đã soán ngôi của MSN Encarta rất nhanh chóng để trở thành bách khoa toàn thư được dùng nhiều nhất thế giới. Năm 2009, Microsoft khai tử Encarta, chấm dứt gần 20 năm làm mưa làm gió trên thị trường bách khoa toàn thư.</span><br />
<span style="font-family: Arial; font-size: 15px; line-height: 1.15; white-space: pre-wrap;"><br /></span>
<span style="font-family: Arial; font-size: 15px; line-height: 1.15; white-space: pre-wrap;">Đã hơn một thập kỷ trôi qua, vẫn chưa có nguồn tri thức tham khảo nào đủ mạnh để đe dọa sự tồn tại của Wikipedia. Nhưng người ta đã phát hiện ra ngày càng nhiều vấn đề bên trong nội tại của hệ thống bách khoa toàn thư trực tuyến này, mà thể hiện rõ rệt nhất ở mâu thuẫn giữa hai trường phái deletionism và inclusionism (1). Chúng tôi xem đây là nhược điểm chí mạng của Wikipedia mà Myzone có thể lợi dụng được để chen chân vào lĩnh vực bách khoa tri thức.</span><br />
<span style="font-family: Arial; font-size: 15px; line-height: 1.15; white-space: pre-wrap;"><br /></span>
<span style="font-family: Arial; font-size: 15px; line-height: 1.15; white-space: pre-wrap;">Wikipedia chủ chương là mở, nhưng nó không thực sự mở đúng nghĩa. Một trong những yêu cầu đối với contributors của Wikipedia khi viết bài là phải đứng trên quan điểm trung lập. NPOV hay Neutral point-of-view là chính sách áp dụng bắt buộc đối với mọi bài viết trên Wikipedia. Điều này cũng có nghĩa rằng mọi contributors của Wikipedia đều phải thủ tiêu cái tôi của họ để phản ánh nội dung từ góc nhìn khách quan trung lập nhất có thể. Những bài viết không tuân theo tôn chỉ đó sẽ bị loại trừ. Đó là phương châm làm việc của nhóm deletionism. Những người theo inclusionism không nghĩ vậy. Họ cho rằng cần phải dung nạp cái nhìn cá nhân và rằng tri thức nhân loại không còn là tri thức nhân loại nếu cái tôi cá nhân của người viết không được thừa nhận.</span><br />
<span style="font-family: Arial; font-size: 15px; line-height: 1.15; white-space: pre-wrap;"><br /></span>
<span style="font-family: Arial; font-size: 15px; line-height: 1.15; white-space: pre-wrap;">Trên Wikipedia, deletionism vẫn đang thắng thế. Các bài viết của Wikipedia luôn mang dáng vẻ hàn lâm. Người dùng Wikipedia chỉ có thể đọc nội dung mà không thể tranh cãi gì thêm về nội dung đó. Wikipedia là mở, nhưng lại thiếu sự cởi mở với người dùng cuối. Chúng ta không bàn về tính đúng hay sai của hướng đi này, nhưng rõ ràng như thế là không đủ đáp ứng ham muốn tri thức của phần lớn nhân loại. Xét về mặt công năng, Wikipedia không khác mấy so với một bộ sách Encyclopedia Britannica đồ sộ nằm trên giá sách, hay chương trình MSN Encarta, mà chúng ta chỉ có thể đọc, xem, nghe từ một chiều duy nhất, tức là qua cách nhìn được xem là trung lập của người soạn thảo. </span></div>
<b style="font-weight: normal;"><span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"></span></b>
<br />
<div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Ngoài ra, khi tham khảo một tài liệu trên Wikipedia, chúng ta không thấy được quan hệ giữa vấn đề nêu ra trong tài liệu đó với những sự vật hiện tượng khác nằm trong cùng một trường kiến thức cần quan tâm, và cũng không có khả năng xem xét nó từ những phạm trù liên quan khác.</span><br />
<span style="font-family: Arial; font-size: 15px; line-height: 1.15; white-space: pre-wrap;"><br /></span>
<span style="font-family: Arial; font-size: 15px; line-height: 1.15; white-space: pre-wrap;">Thế giới ngày nay đã là thế giới đa chiều.</span><br />
<span style="color: black; font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;"><br /></span>
<span style="color: black; font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;">Google cố gắng phản ánh tính chất đa chiều và quan hệ giữa các sự vật hiện tượng trên thế giới thông qua </span><a href="http://www.google.com/insidesearch/features/search/knowledge.html" style="line-height: 1.15; text-decoration: none;"><span style="color: #1155cc; font-family: Arial; font-size: 15px; text-decoration: underline; vertical-align: baseline; white-space: pre-wrap;">một đồ thị tri thức</span></a><span style="color: black; font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;"> của họ. Đồ thị này được xây dựng trên hệ thống cơ sở dữ liệu Freebase, các tài liệu của Wikipedia, và chức năng tìm kiếm của Google Search Engine. Myzone của chúng ta cũng đang đi theo con đường này nhưng được bổ sung thêm một nhân tố mới, đó là mạng xã hội.</span><br />
<span style="font-family: Arial; font-size: 15px; line-height: 1.15; white-space: pre-wrap;"><br /></span>
<span style="font-family: Arial; font-size: 15px; line-height: 1.15; white-space: pre-wrap;">Myzone áp dụng một mô hình mạng xã hội kiểu mới, dựa trên nền tảng quan hệ là kiến thức. Về sau này, chúng tôi có đưa ra một công thức để diễn tả khái niệm Myzone như dưới đây :</span><br />
<span style="color: black; font-family: Arial; font-size: 16px; font-weight: bold; line-height: 1.15; text-align: center; vertical-align: baseline; white-space: pre-wrap;"><br /></span>
<span style="color: black; font-family: Arial; font-size: 16px; font-weight: bold; line-height: 1.15; text-align: center; vertical-align: baseline; white-space: pre-wrap;">Myzone</span><span style="color: black; font-family: Arial; font-size: 16px; line-height: 1.15; text-align: center; vertical-align: baseline; white-space: pre-wrap;"> = Knowledge Graph + (Interest Network + Social Network)</span><br />
<span style="font-family: Arial; font-size: 15px; line-height: 1.15; text-align: center; white-space: pre-wrap;"><br /></span>
<span style="font-family: Arial; font-size: 15px; line-height: 1.15; text-align: center; white-space: pre-wrap;">Đơn cử một sự khác biệt căn bản giữa Myzone và Wikipedia, khi tìm hiểu khái niệm Napoleon, Wikipedia chỉ cung cấp một bài viết duy nhất về Napoleon. Myzone, ngoài việc cho biết Napoleon là ai, còn cung cấp hàng loạt bài viết, hình ảnh và video về Napoleon, cho phép nhìn Napoleon dưới góc độ một nhà chính trị hoặc một nhà quân sự, hoặc như một nhân vật lịch sử, một người gây ảnh hưởng ở Châu Âu và thế giới… Myzone cũng liên kết khái niệm Napoleon với các trận đánh của Napoleon, các bộ phim và sách viết về Napoleon, các nhân vật khác trong dòng họ Bonaparte, các nhân vật cùng thời… Myzone còn cho biết những ai trong hệ thống đang quan tâm đến khái niệm Napoleon, họ đã cung cấp nội dung gì, đánh giá thế nào về Napoleon... Rất nhiều thứ xung quanh một khái niệm.</span><br />
<span style="font-family: Arial; font-size: 15px; line-height: 1.15; white-space: pre-wrap;"><br /></span>
<span style="font-family: Arial; font-size: 15px; line-height: 1.15; white-space: pre-wrap;">Myzone không bó hẹp trong các tri thức hàn lâm mà hướng đến phần đông nhân loại với những mối quan tâm thường nhật. Các bà mẹ có thể dễ dàng chia sẻ một công thức nấu món thịt hầm và thảo luận với nhau. Công thức nấu ăn đó sẽ trở thành một định nghĩa trong Myzone. Các chủ doanh nghiệp có thể dễ dàng giới thiệu về công ty của họ, tạo liên kết với các nhân viên của công ty, các dự án triển khai bởi công ty, các đối tác đang làm việc với công ty... Trong đó, mỗi nhân viên có thể là một user trong hệ thống Myzone, mỗi dự án hoặc đối tác cũng là một định nghĩa độc lập trong Myzone...</span><br />
<span style="font-family: Arial; font-size: 15px; line-height: 1.15; white-space: pre-wrap;"><br /></span>
<span style="font-family: Arial; font-size: 15px; line-height: 1.15; white-space: pre-wrap;">Đó là một hệ thống bách khoa toàn thư không ngừng vận động; một cộng đồng mạng xã hội tương tác với nhau và cùng nhau tương tác lên một mạng lưới kiến thức tổng hợp rộng lớn; một mạng xã hội chưa từng có trên thế giới.</span></div>
<div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><br /></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-TwDNO2vO2QQ/Uj2jn8ZMLlI/AAAAAAAAC3s/BuubBPgKY-Q/s1600/Youlook_NodeDetail.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="400" src="http://3.bp.blogspot.com/-TwDNO2vO2QQ/Uj2jn8ZMLlI/AAAAAAAAC3s/BuubBPgKY-Q/s400/Youlook_NodeDetail.jpg" width="225" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<i>Giao diện Myzone application trên iPhone</i></div>
<div class="separator" style="clear: both; text-align: center;">
<span style="font-family: Arial; font-size: 15px; line-height: 1.15; white-space: pre-wrap;"><br /></span></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="font-family: Arial; font-size: 15px; line-height: 1.15; white-space: pre-wrap;">Myzone tuân theo nguyên lý sáng tạo dựa trên cải biến và tích hợp. Myzone thừa kế những concept cũ và tạo ra một con đường hoàn toàn mới. Myzone bao gồm trong nó các chức năng của hầu hết các loại hình dịch vụ hiện tại :</span></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="font-family: Arial; font-size: 15px; line-height: 1.15; white-space: pre-wrap;"><br /></span></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="font-family: Arial; font-size: 15px; line-height: 1.15; white-space: pre-wrap;">- cung cấp thông tin cá nhân và tổ chức như một website thông thường</span></div>
<div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">- kết nối con người như Facebook</span></div>
<div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">- kết nối các tổ chức như LinkedIn</span></div>
<div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">- chia sẻ links như Twitter</span></div>
<div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">- chia sẻ phim như YouTube</span></div>
<div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">- chia sẻ hình ảnh như Flickr</span></div>
<div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">- chia sẻ tin tức sự kiện như trên Google+</span></div>
<div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">- chia sẻ kiến thức, kinh nghiệm cá nhân như trên các dịch vụ blogging</span></div>
<div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">- cung cấp nội dung tham khảo như Wikipedia</span></div>
<div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">- tìm kiếm như trên Google</span><br />
<span style="line-height: 1.15;"><br /></span>
<span style="line-height: 1.15;">Tóm lại, chỉ với Myzone, người sử dụng internet có thể làm được rất nhiều thứ mà không phải chạy đi chạy lại giữa các dịch vụ, không phải quản lý quá nhiều tài khoản.</span><br />
<span style="line-height: 1.15;"><br /></span>
<span style="line-height: 1.15;">Trong thời gian tới, để chuẩn bị cho sự ra mắt Myzone, chúng tôi sẽ tiếp tục publish những thông tin thú vị liên quan đến hệ thống bách khoa toàn thư xã hội mới mẻ này, mời các bạn theo dõi.</span></div>
<div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<br />
<br />
<u>Chú thích :</u><br />
<br />
1. <span style="font-family: Arial; font-size: 15px; line-height: 17px; white-space: pre-wrap;">Các thuật ngữ này có lẽ vẫn chưa có từ tương ứng trong tiếng Việt. </span><span style="line-height: 1.15;">Chúng tôi tạm dịch </span><span style="font-family: Arial; font-size: 15px; line-height: 17px; white-space: pre-wrap;"><i>deletionism</i> thành "chủ nghĩa thanh lọc" và <i>inclusionism</i> thành </span><span style="line-height: 1.15;">"</span><span style="font-family: Arial; font-size: 15px; line-height: 17px; white-space: pre-wrap;">chủ nghĩa bao gồm". </span></div>
<div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<br /></div>
Dong Nguyenhttp://www.blogger.com/profile/08315900287977325135noreply@blogger.comtag:blogger.com,1999:blog-4828609964961329038.post-67360785118689291932013-09-08T19:59:00.001+07:002013-09-21T22:39:56.024+07:00Thử lý giải vụ "Báo mộng tìm con"<div class="separator" style="clear: both; text-align: center;">
<br /></div>
Hôm 5/9 vừa rồi, hàng loạt tờ báo theo nhau đăng tải một câu chuyện mang màu sắc tâm linh kỳ quái. Tôi tạm gọi đó là vụ "<a href="http://www.nguoiduatin.vn/quang-nam-hon-ma-vo-bao-mong-giup-chong-tim-con-a101369.html"><span style="color: blue;">Báo mộng tìm con</span></a>".<br />
<br />
Trước hết, xin được tóm tắt như sau :<br />
<br />
Cụ Nguyễn Não, năm nay 80 tuổi, nguyên quán xã Tam Lập, huyện Phú Ninh, tỉnh Quảng Nam. Vào những năm 1960, khi cụ đã có vợ và 4 người con thì chẳng may nhà bị dính bom, cụ bà mất từ đó. Năm 1961, người con thứ 2 của cụ cũng qua đời. Năm 1969, cụ bị địch bắt đày ra Côn Đảo. Người con cả của cụ bèn dắt díu 2 em vào Đồng Nai lánh nạn, được một thời gian thì thất lạc nhau. Mãi tới năm 1975, nhờ ơn Đảng, cụ Não mới được giải thoát trở về quê hương. Đau đớn thay, cả mấy người con đều đã thất tán nơi chân trời góc biển, nào ai hay biết.<br />
<br />
Thế mà rồi trong 10 năm sau đó, lần hồi cụ cũng tìm lại được hai người con. Duy chỉ có cậu út là vẫn bặt vô âm tín cho đến khi sự lạ xảy ra.<br />
<br />
Tác giả bài báo viết:<br />
<blockquote class="tr_bq">
<i>"Đến đầu tháng 4/2012, với nỗi nhớ nhung, day dứt về đứa con út đang thất lạc, ông thắp nhang lên bàn thờ của người vợ quá cố để xin bà phù hộ độ trì. Không lâu sau đó, trong một lần nằm ngủ, giấc mơ của ông Não đã được bà vợ hiện về báo mộng, con trai hiện đang ở TP Hội An, đã có vợ con, tên khác, với mái tóc bạc trắng."</i></blockquote>
<br />
Với những chỉ dẫn của cụ bà qua giấc mơ, ông lão 80 tuổi lặn lội vào Hội An và dễ dàng tìm lại được cậu út, anh Dũng, khi ấy đã 47 tuổi và lấy tên là Châu. Tính ra, cha con ông đã mất liên lạc tổng cộng 42 năm, gần nửa thế kỷ. Nếu không nhờ giấc mơ kỳ bí của ông, thì chắc rằng mãi mãi hai cha con không thể nào gặp lại được.<br />
<br />
<div style="text-align: center;">
<br /></div>
<div style="text-align: center;">
<a href="http://2.bp.blogspot.com/-Z7xXqxpcaUU/Uix0A8vd-qI/AAAAAAAAC2g/J4fjh2HKJJU/s1600/Anh+Chau.jpg"><img border="0" src="http://2.bp.blogspot.com/-Z7xXqxpcaUU/Uix0A8vd-qI/AAAAAAAAC2g/J4fjh2HKJJU/s320/Anh+Chau.jpg" /></a></div>
<div style="text-align: center;">
<br /></div>
<div style="text-align: center;">
<i>Anh Châu, tức anh Dũng, con út của cụ Não (Ảnh : nguoiduatin.vn)</i></div>
<br />
<br />
Tôi xin nói ngay rằng tôi hoàn toàn tin vào những gì cụ Não kể về giấc mơ của cụ. Nhìn từ góc độ duy tâm, hiện tuợng "báo mộng tìm con" như trong câu chuyện là hết sức bình thường, không có gì khó hiểu. Người ta cũng có thể đem các khái niệm về "trường sinh học" ra để giải thích. Nhưng trong bài viết này, tôi sẽ thử nhìn nhận vấn đề theo một logic đơn giản hơn. Tôi không rõ có một thuật ngữ chuyên môn nào diễn tả điều tôi sắp trình bày hay không, nên tạm gọi nó là "hiệu ứng giao thoa ký ức cộng đồng". Ai biết xin chỉ giáo.<br />
<br />
Mỗi cuộc đời là một tiến trình đi từ sinh đến tử. Trong khoảng giữa của hai thời khắc đó, chúng ta liên tục có những hành động thể hiện nội tâm và phản ứng với ngoại giới. Chúng ta va chạm với thế giới xung quanh bằng vô vàn hình thức khác nhau. Chúng ta liên tục tương tác với người này người khác và làm cho thế giới thay đổi trong từng giây phút. Ngay khi chúng ta hái xuống một chiếc lá, hành động đó đã làm cho thế giới này thay đổi và tương lai bắt đầu xoay chuyển theo một đường hướng khác.<br />
<br />
Có hằng hà sa số những tương tác như vậy được phát sinh từ vạn vật trong vũ trụ. Nếu chỉ thu hẹp lại trong đời sống nhân loại, chúng ta cũng thấy nó vượt xa mọi khả năng của trí tưởng tượng. Con người quan hệ với nhau bằng nhiều hình thức, trên nhiều cấp độ và thông qua nhiều lĩnh vực. Nhưng chỉ cần có tiếp xúc, trao đổi với nhau một cái nhìn, một thanh âm... cuộc đời đã khác đi nhiều lắm. Khi bạn bước vào một cửa hàng, hỏi cô lễ tân xinh đẹp một câu. Tất cả đã thay đổi. Trong tâm trí của cô ấy đã có dấu vết về bạn rồi. Nó hoàn toàn khác với trước khi bạn đến, cô ta không có ý niệm nào về sự hiện hữu của bạn trên đời. Về phía bạn cũng vậy. Cách đây không lâu có <a href="http://www.tinmoi.vn/sinh-vien-bi-giet-tai-giang-duong-vi-nhin-deu-011121388.html"><span style="color: blue;">một cậu sinh viên bị giết chỉ vì vô tình nhìn mấy gã giang hồ đi ngang qua giảng đường</span></a>. Nếu trong cái khoảnh khắc vi diệu ấy, chỉ cần một con sâu nhỏ tình cờ bò lên bàn một nữ sinh trong lớp khiến cô ấy kêu lên và cậu ta ngoảnh đầu lại thay vì nhìn ra cửa sổ thì số phận cậu ta đã khác.<br />
<br />
Hãy hình dung bạn đang len lỏi qua một đám đông trong rạp chiếu phim. Người ở phía trước từ từ nhích sang hai bên chừa lại khoảng trống cho bạn chiếm chỗ. Rồi đám đông ấy tự động khép lại phía sau bạn. Có nghĩa rằng bạn đã làm thay đổi trật tự thế giới. Điều đó có thể khiến một người đàn ông về nhà muộn hơn vài phút và bị vợ bắt ngủ ngoài sân. Giọt nước tràn ly, anh chồng nhảy sông tự tử. Mấy đứa con trở thành mồ côi. Số phận của chúng đã thay đổi. Chị vợ anh ta không chịu nổi cô đơn, bắt đầu cặp với một chàng trai khác. Gã đó sau rồi quyết định bỏ vợ để theo về sống với mẹ con chị ta... Cứ như thế, xã hội vận động trong một tiến trình bất tuyệt.<br />
<br />
Dù chúng ta đi đâu, làm gì, chúng ta cũng để lại những hiệu ứng khôn lường đối với cộng đồng xung quanh nơi ta đến. Bạn có thể nghĩ về một chiếc ván lướt sóng, khi người ta trượt đi, nó cũng để lại vệt sóng tỏa ra hai bên như vậy. Người ta chỉ thấy vết sóng yếu dần và biến mất. Nhưng đại dương đã hoàn toàn biến đổi sau những làn sóng ấy.<br />
<br />
Trong câu chuyện của cha con ông Não, có hai chi tiết đáng lưu ý. Thứ nhất, cả ông cụ và anh con út đều nỗ lực tìm lại nhau. Thứ hai, họ chia sẻ cùng một ý niệm về địa danh Đồng Nai. Đó là những yếu tố quyết định sự đoàn tụ của họ, dù ngày gặp lại nhau không phải ở Đồng Nai.<br />
<br />
Một khi cả hai cha con ông đều xuất hiện ở một vùng đất, tức là tiếp xúc với cộng đồng ở đó, họ đã tác động vào thực tại và tương lai của cộng đồng. Câu chuyện của họ sẽ trở thành một phần ký ức cộng đồng. Cộng đồng ấy tương tác với nhau và truyền tải thông điệp về hai câu chuyện "cha tìm con" và "con tìm cha" như những đợt sóng. Mỗi lần cha con họ xuất hiện, các đợt sóng lại tung ra va chạm với những nhân tố năng động trong cộng đồng và lan tỏa trong một khoảng thời gian/không gian nhất định. Những tín hiệu đó yếu dần đi nhưng không bị triệt tiêu hẳn mà ngưng tụ lại trong ký ức một số cá nhân bị ấn tượng mạnh bởi câu chuyện. Thậm chí còn có thể có những người đủ mẫn cảm để lắp ghép hai luồng sự kiện vào với nhau, nhưng không hội đủ điều kiện để nói ra kết luận.<br />
<br />
(Giả như cụ Lãnh nghe được câu chuyện "con tìm cha", bữa nọ vén quần ngồi nhậu vui miệng kể với cụ Hớ. Cụ Hớ chát chít với cụ Phụng đem ra nói lại. Một ngày kia cụ Phụng ngồi cafe ở Biên Hòa, nghe lỏm một bác xe ôm kể chuyện rằng bác ta mới nghe vợ kể chuyện rằng tối qua bà ấy nghe một chị bạn kể chuyện rằng tuần trước có ông cụ gần 80 tuổi vào đây hỏi thăm tìm con... Trong tâm thức cụ Phụng hoàn toàn có thể liên tưởng móc nối hai mạch chuyện nhưng cụ sẽ không có cơ hội để nói ra điều đó vì quá nhiều mắt xích cụ chẳng thể nào tiếp cận được.)<br />
<br />
Thế nhưng, các đợt sóng thông tin vẫn va chạm nhau, để lại ký ức trong cộng đồng người sinh sống ở Đồng Nai. Chỉ cần một sáng nào đó, có một chị bán chè ngoài chợ nhìn thấy ông lão tội nghiệp, bâng quơ nói với ông một cách mơ hồ về chuyện một anh ở ngoài Hội An tên là Châu vào tìm cha mấy lần chưa thấy. Lập tức, hai tiếng Hội An sẽ trở thành một tín hiệu bền vững trong trí óc cụ.<br />
<br />
- Cô có biết anh ấy bao nhiêu tuổi không?<br />
- Dạ, cháu cũng không rõ. Chỉ nghe mấy bà trong chợ kháo nhau như thế.<br />
<br />
Rồi mấy năm sau trở lại, nếu may mắn cụ sẽ gặp một tay thợ hồ, kể rằng năm ngoái đi làm cho một ông chủ thầu tên là Ngạo bên Định Quán, ổng kể rằng năm ngoái có một người tên là Châu, ở Hội An vào đây tìm cha thất lạc từ dạo chiến tranh, nhưng mấy tháng vẫn không tìm được nên xin nghỉ về quê.<br />
<br />
- Chú có biết ông Châu đó nhìn thế nào không?<br />
- Dạ con chỉ nghe nói chú ấy tóc đã hơi bạc rồi... <br />
<br />
Bấy giờ, ấn tượng về Hội An và cái tên Châu sẽ có thể trở thành ám ảnh của cụ mỗi khi nhớ tới người con lưu lạc. "Biết đâu nó chính là thằng Dũng nhà mình!", ý nghĩ ấy một khi xuất hiện và được nuôi nấng bằng khao khát tìm lại con, nó sẽ len lỏi trong tâm trí cụ cho đến lúc biến thành giấc mơ. Đồng Nai, Hội An, Châu, Dũng, mái tóc bạc... và nhiều loại thông tin vi tế khác nữa mà cụ không nói ra được, cứ xoay vòng trong đầu cụ nhiều năm tháng. Vô thức của cụ tổ hợp các mảnh vụn thông tin rời rạc ấy lại thành một chỉnh thể dựa trên ao ước lớn nhất đời cụ là trả lời câu hỏi: “Thằng Dũng bây giờ ở đâu?”. Không trả lời được, cụ sẽ không thanh thản và cảm thấy có lỗi với người vợ đã mất. Chắc hẳn đã rất nhiều lần cụ vừa thắp hương lên bàn thờ vợ và thầm hỏi : "Cái người ấy có phải thằng Dũng nhà mình không hả bà?". Cụ muốn tin điều đó là sự thật vì với cụ đó là kết quả mong đợi nhất. Giấc mơ của cụ, chỉ là một hình thức gia cố cho niềm tin mong manh. Logic của giấc mơ phản ảnh khát vọng trong vô thức của chủ thể, còn dữ kiện của giấc mơ đều được lấy từ hiện thực.<br />
<br />
Trong hai cuộc tìm kiếm của anh Dũng và cụ Não thì cụ Não có lợi thế hơn. Bởi trước đó nhờ việc tìm được hai người con khác, cụ đã có thêm dữ kiện đủ để thu hẹp địa bàn tìm kiếm. Còn anh Dũng phải trải rộng miền tìm kiếm ra khắp cả vùng Đồng Nai. Ví như thể cụ Não ném xuống giữa hồ nhiều hòn đá lớn, còn anh Dũng rải nhiều hòn sỏi bé hơn xung quanh. Sức lan tỏa thông tin mạnh yếu khác nhau nhưng dù thế nào cũng có những vòng tròn sóng gặp nhau, cộng hưởng với nhau và dội trở lại. Tôi tạm gọi hiệu ứng vận động xã hội này là "hiệu ứng giao thoa ký ức cộng đồng". Nhờ hiệu ứng này, cụ Não tiếp nhận được các dữ kiện rời rạc từ nhiều người khác nhau trong nhiều khoảng thời gian khác nhau, cụ đem chắp nối với nhau dựa trên khát vọng của vô thức để từ đó hình thành giấc mơ kỳ diệu.<br />
<br />
<br />
<b>Kết luận</b><br />
<br />
Đa số những sự việc mang vẻ ngoài kỳ bí thường vẫn có thể giải thích được bằng những kiến thức khoa học phổ thông căn bản mà không cần phải nhờ cậy đến một thế lực siêu nhiên nào. Chỉ cần nắm được một số dữ kiện cần thiết của vấn đề, chỉ cần lý trí đủ tỉnh táo để bước ra khỏi bóng mờ tâm linh, chỉ cần chậm rãi xem xét các bình diện của vấn đề bằng tư duy khoa học, chúng ta sẽ tỏ tường được hầu như mọi điều ám muội. Dong Nguyenhttp://www.blogger.com/profile/08315900287977325135noreply@blogger.comtag:blogger.com,1999:blog-4828609964961329038.post-49597123834838099662013-07-20T10:42:00.000+07:002013-07-21T22:08:42.365+07:00Lập trình dựa trên nguyên mẫu<div dir="ltr" style="margin-bottom: 0pt; margin-top: 0pt;">
<h2 style="text-align: center;">
</h2>
<div style="line-height: 1.15;">
<span style="background-color: white; color: black; font-family: Arial; font-size: 15px; font-style: italic; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Thừa kế (inheritance) là khái niệm chủ đạo trong lập trình hướng đối tượng (OOP). Đây cũng là thứ để lại nhiều câu chuyện thú vị nhất trong bộ môn "Javascript học".</span></div>
<div style="line-height: 1.15;">
<span style="background-color: white; font-family: Arial; font-size: 15px; font-style: italic; line-height: 1.15; white-space: pre-wrap;"><br /></span></div>
<div style="line-height: 1.15;">
<span style="background-color: white; font-family: Arial; font-size: 15px; font-style: italic; line-height: 1.15; white-space: pre-wrap;">Thoạt tiên, người ta cho rằng Javascript không phải là một ngôn ngữ hướng đối tượng, mặc dù trong lõi của Javascript có sẵn một đối tượng tên là Đối tượng (Object). Tại sao? Vì khi nhìn bằng quan điểm OOP truyền thống, người ta không thấy trong Javascript những đặc tính của một ngôn ngữ hướng đối tượng, như : đa hình (polymorphism), đóng gói (encapsulation ) và thừa kế (inheritance). Nhìn vào những phiên bản Javascript đầu tiên, có thể nói rằng Javascript không phải là một ngôn ngữ OOP "bẩm sinh".</span></div>
<div style="line-height: 1.15;">
<span style="background-color: white; font-family: Arial; font-size: 15px; font-style: italic; line-height: 1.15; white-space: pre-wrap;"><br /></span></div>
<div style="line-height: 1.15;">
<span style="background-color: white; font-family: Arial; font-size: 15px; font-style: italic; line-height: 1.15; white-space: pre-wrap;">May mắn thay, các nhà Javascript học tiên phong đã bước vào thế kỷ XXI với một loạt những khảo sát giá trị về ngôn ngữ này. Cho đến giữa thập kỷ trước, hàng loạt sản phẩm mới ra đời tận dụng một cách triệt để các thế mạnh của Javascript phía client như GMail, GMap... và bên cạnh đó là Firefox, mở đầu cho một thế hệ trình duyệt mới, mạnh mẽ và thông minh. Cộng đồng Mozilla, cũng như các nhà phát triển của AOL, Google, Yahoo!... từ lúc đó, đã nhìn thấy nơi Javascript bóng dáng một ngôn ngữ lập trình của tương lai. Netscape vứt bỏ hẳn khái niệm applet/embed để tập trung vào nâng cấp Javascript engine. Hai tổ chức về chuẩn web và ngôn ngữ lập trình là W3C và ECMA giữ vai trò cầm cân nẩy mực phía sau việc chuẩn hóa Javascript. Với sự hậu thuẫn từ rất nhiều thế lực Internet như vậy, Javascript đã ngày càng trở nên hoàn thiện.</span></div>
<div style="line-height: 1.15;">
<span style="background-color: white; font-family: Arial; font-size: 15px; font-style: italic; line-height: 1.15; white-space: pre-wrap;"><br /></span></div>
<div style="line-height: 1.15;">
<span style="background-color: white; font-family: Arial; font-size: 15px; font-style: italic; line-height: 1.15; white-space: pre-wrap;">Qua loạt bài dịch này, tôi sẽ kể lại câu chuyện về thừa kế trong Javascript, những phương pháp khắc phục hạn chế OOP mà những người yêu thích Javascript thời trước sáng tạo ra, và phương thức hỗ trợ thừa kế trong Javascript sẽ xuất hiện thời gian tới...</span></div>
<div style="line-height: 1.15;">
<span style="background-color: white; color: black; font-family: Arial; font-size: 15px; font-style: italic; vertical-align: baseline; white-space: pre-wrap;"><br /></span></div>
<div style="line-height: 1.15;">
<span style="background-color: white; color: black; font-family: Arial; font-size: 15px; font-style: italic; vertical-align: baseline; white-space: pre-wrap;">Nhưng trước hết, chúng ta hãy cùng tìm hiểu thế nào là lập trình dựa trên nguyên mẫu (prototype-based programming) qua</span><a href="http://en.wikipedia.org/wiki/Prototype-based_programming" style="line-height: 1.15; text-decoration: none;"><span style="background-color: white; color: black; font-family: Arial; font-size: 15px; font-style: italic; vertical-align: baseline; white-space: pre-wrap;"> </span><span style="background-color: white; color: #1155cc; font-family: Arial; font-size: 15px; font-style: italic; text-decoration: underline; vertical-align: baseline; white-space: pre-wrap;">một topic trên Wikipedia</span></a><span style="background-color: white; color: black; font-family: Arial; font-size: 15px; font-style: italic; vertical-align: baseline; white-space: pre-wrap;">.</span></div>
</div>
<b style="font-weight: normal;"><br /><span style="background-color: white; color: black; font-family: Arial; font-size: 15px; font-style: italic; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"></span></b>
<br />
<div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt; text-align: center;">
<span style="background-color: white; color: black; font-family: Arial; font-size: 24px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Lập trình dựa trên nguyên mẫu</span><br />
<span style="background-color: white; color: black; font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;"><br /></span>
<br />
<div style="text-align: left;">
<span style="background-color: white; color: black; font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;">Lập trình dựa trên </span><span style="background-color: white; font-family: Arial; font-size: 15px; line-height: 17px; white-space: pre-wrap;">nguyên mẫu (</span><span style="background-color: white; color: black; font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;">prototype) là phương pháp lập trình hướng đối tượng mà ở đó người ta không sử dụng các class (lớp). Thay vì thừa kế thuộc tính và phương thức của lớp cha như trong các ngôn ngữ dựa trên class, việc dùng lại phương thức và thuộc tính trong lập trình prototype được xử lý bằng cách sao chép một đối tượng có sẵn đóng vai trò nguyên mẫu. Mô hình này cũng được gọi bằng những cái tên khác như lập trình khử class, lập trình hướng nguyên mẫu, lập trình dựa trên hiện thể, hoặc lập trình thừa kế theo phương ngang</span><span style="background-color: white; color: black; font-family: Arial; font-size: 10px; vertical-align: super; white-space: pre-wrap;"> (1)</span><span style="background-color: white; color: black; font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;">. Ủy quyền (delegation) là điểm đặc trưng của các ngôn ngữ hỗ trợ lập trình prototype.</span></div>
</div>
<div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: white; color: black; font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;"><br /></span>
<br />
<div style="text-align: left;">
<span style="background-color: white; color: black; font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;">Ngôn ngữ lập trình dựa trên prototype đầu tiên xuất hiện là</span><a href="http://en.wikipedia.org/wiki/Self_(programming_language)" style="line-height: 1.15; text-decoration: none;"><span style="background-color: white; color: black; font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;"> </span><span style="background-color: white; color: #1155cc; font-family: Arial; font-size: 15px; text-decoration: underline; vertical-align: baseline; white-space: pre-wrap;">Self</span></a><span style="background-color: white; color: black; font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;">, được hai tác giả David Ungar và Randall Smith phát triển vào khoảng giữa những năm 1980 khi nghiên cứu các chủ đề về thiết kế ngôn ngữ lập trình hướng đối tượng. Đến cuối những năm 1990, các mô hình khử class đã ngày càng mở rộng ra đại chúng. Một vài ngôn ngữ lập trình hướng prototype ngày nay là JavaScript (cùng với những bổ sung khác của ECMAScript, JScript và Flash's ActionScript 1.0), Cecil, NewtonScript, Io, MOO, REBOL, và Lisaac.</span></div>
<div style="text-align: left;">
<span style="background-color: white; font-family: Arial; font-size: 15px; font-weight: bold; line-height: 1.15; white-space: pre-wrap;"><br /></span></div>
<div style="text-align: left;">
<span style="background-color: white; font-family: Arial; font-size: 15px; font-weight: bold; line-height: 1.15; white-space: pre-wrap;">So sánh với các mô hình dựa trên class</span></div>
<div style="text-align: left;">
<span style="background-color: white; color: black; font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;"><br /></span></div>
<div style="text-align: left;">
<span style="background-color: white; color: black; font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;">Trong các ngôn ngữ dựa trên class, cấu trúc của các đối tượng được chỉ định theo những khuôn dạng do lập trình viên định nghĩa, gọi là các lớp (class). Trong khi class định nghĩa kiểu dữ liệu và chức năng mà đối tượng sẽ có, các hiện thể là những đối tượng "đem dùng được" </span><span style="background-color: white; color: black; font-family: Arial; font-size: 10px; vertical-align: super; white-space: pre-wrap;">(2)</span><span style="background-color: white; color: black; font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;"> dựa trên bộ khung phương thức/thuộc tính của một class riêng biệt. Trong mô hình này, class có tác dụng như một tập hợp các ứng xử (phương thức) và cấu trúc đồng nhất cho mọi hiện thể, còn các hiện thể đem theo dữ liệu của đối tượng. Sự phân biệt vai trò do đó chủ yếu căn cứ vào một bên là sự phân biệt giữa cấu trúc và ứng xử, còn một bên là trạng thái.</span></div>
<div style="text-align: left;">
<span style="background-color: white; font-family: Arial; font-size: 15px; line-height: 1.15; white-space: pre-wrap;"><br /></span></div>
<div style="text-align: left;">
<span style="background-color: white; font-family: Arial; font-size: 15px; line-height: 1.15; white-space: pre-wrap;">Những người bênh vực lập trình dựa trên prototype thường lập luận rằng các ngôn ngữ dựa trên class khuyến khích một mô hình phát triển tập trung trước hết vào sự phân loại các quan hệ giữa những class với nhau, trong khi trái lại, lập trình dựa trên prototype có vẻ như khuyến khích lập trình viên tập trung vào ứng xử của một đối tượng nào đó và chỉ tính đến chuyện phân nhóm chúng khi các đối tượng sau đó dùng lại theo cách thức giống như khi dùng class. </span></div>
<div style="text-align: left;">
<span style="background-color: white; font-family: Arial; font-size: 15px; line-height: 1.15; white-space: pre-wrap;"><br /></span></div>
<div style="text-align: left;">
<span style="background-color: white; font-family: Arial; font-size: 15px; line-height: 1.15; white-space: pre-wrap;">Tương tự thế, nhiều ngôn ngữ dựa trên prototype khuyến khích việc sửa đổi nguyên mẫu khi đang thực thi chương trình, điều mà hiếm hệ thống hướng đối tượng dựa trên class nào cho phép, ngoại trừ Common Lisp, Dylan, Smalltalk, Objective-C, Python, Perl, hay Ruby. Hầu hết các ngôn ngữ lập trình dựa trên prototype đều là thông dịch và định kiểu động. Mặc dù về khía cạnh kỹ thuật, các ngôn ngữ định kiểu tĩnh cũng tiện dụng không kém.</span></div>
<div style="text-align: left;">
<span style="background-color: white; color: black; font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;"><br /></span></div>
<div style="text-align: left;">
<span style="background-color: white; color: black; font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;">Ngôn ngữ Omera được nhắc đến trong</span><a href="http://en.wikipedia.org/wiki/Prototype-based_programming" style="line-height: 1.15; text-decoration: none;"><span style="background-color: white; color: black; font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;"> </span><span style="background-color: white; color: #1155cc; font-family: Arial; font-size: 15px; text-decoration: underline; vertical-align: baseline; white-space: pre-wrap;">bài này</span></a><span style="background-color: white; color: black; font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;"> là một ví dụ. Xem qua website của Omega thì nó không phải là ngôn ngữ định kiểu tĩnh hoàn toàn, bởi lẽ "trình biên dịch có thể chọn sử dụng ràng buộc tĩnh khi cần thiết sao cho tối ưu hiệu suất chương trình."</span></div>
<div style="text-align: left;">
<span style="background-color: white; font-family: Arial; font-size: 15px; line-height: 1.15; white-space: pre-wrap;"><br /></span></div>
<div style="text-align: left;">
<span style="background-color: white; font-family: Arial; font-size: 15px; line-height: 1.15; white-space: pre-wrap;">Xem phần "Phê bình" để thấy những so sánh khác nữa.</span></div>
<div style="text-align: left;">
<span style="background-color: white; font-family: Arial; font-size: 15px; font-weight: bold; line-height: 1.15; white-space: pre-wrap;"><br /></span></div>
<div style="text-align: left;">
<span style="background-color: white; font-family: Arial; font-size: 15px; font-weight: bold; line-height: 1.15; white-space: pre-wrap;">Sự kiến tạo đối tượng</span></div>
<div style="text-align: left;">
<span style="background-color: white; color: black; font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;"><br /></span></div>
<div style="text-align: left;">
<span style="background-color: white; color: black; font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;">Trong các ngôn ngữ dựa trên class, một hiện thể mới được sinh ra nhờ một hàm kiến tạo </span><span style="background-color: white; color: black; font-family: Arial; font-size: 10px; vertical-align: super; white-space: pre-wrap;">(3)</span><span style="background-color: white; color: black; font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;"> của class. Hàm kiến tạo là một hàm đặc biệt có nhiệm vụ cấp phát một block bộ nhớ cho các thành viên của đối tượng (thuộc tính/phương thức) và trả về tham chiếu tới block đó. Khi gọi hàm kiến tạo, có thể truyền vào một tập tham số tùy chọn và dùng các thuộc tính để lưu giữ chúng. Hiện thể sinh ra sẽ thừa kế tất cả các phương thức và thuộc tính được định nghĩa trong lớp và hành xử giống như tất cả những hiện thể khác sản sinh ra từ cùng một lớp đó.</span></div>
<div style="text-align: left;">
<span style="background-color: white; color: black; font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;"><br /></span></div>
<div style="text-align: left;">
<span style="background-color: white; color: black; font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;">Trong các ngôn ngữ dựa trên prototype không có các lớp rõ ràng. Các đối tượng thừa kế trực tiếp từ đối tượng khác với những gì mà chúng liên kết với nhau thông qua một thuộc tính, thường gọi là </span><span style="background-color: white; color: black; font-family: Arial; font-size: 15px; font-style: italic; vertical-align: baseline; white-space: pre-wrap;">prototype</span><span style="background-color: white; color: black; font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;"> như trong trường hợp Javascript. Có hai cách để tạo đối tượng mới: đó là tạo mới hoàn toàn </span><span style="background-color: white; color: black; font-family: Arial; font-size: 10px; vertical-align: super; white-space: pre-wrap;">(4)</span><span style="background-color: white; color: black; font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;"> hoặc sao chép từ một đối tượng có sẵn.</span></div>
<div style="text-align: left;">
<span style="background-color: white; font-family: Arial; font-size: 15px; line-height: 1.15; white-space: pre-wrap;"><br /></span></div>
<div style="text-align: left;">
<span style="background-color: white; font-family: Arial; font-size: 15px; line-height: 1.15; white-space: pre-wrap;">Có một số hình thái của đối tượng theo nghĩa đen giúp tạo ra đối tượng mới hoàn toàn, những khai báo nơi mà đối tượng được định nghĩa vào lúc chương trình đang chạy, nhờ các cú pháp đặc biệt như {...} gán thẳng vào một biến. Trong khi hầu hết các ngôn ngữ đều hỗ trợ một cách sao chép, không có gì đáng nói về việc tạo ra một đối tượng mới từ rỗng.</span></div>
<div style="text-align: left;">
<span style="background-color: white; font-family: Arial; font-size: 15px; line-height: 1.15; white-space: pre-wrap;"><br /></span></div>
<div style="text-align: left;">
<span style="background-color: white; font-family: Arial; font-size: 15px; line-height: 1.15; white-space: pre-wrap;">Các ngôn ngữ hỗ trợ tạo đối tượng rỗng cho phép những đối tượng mới được tạo ra mà không cần sao chép từ nguyên mẫu sẵn có. Chúng cung cấp một cú pháp đặc biệt để chi định những thuộc tính và hành xử của đối tượng mới mà không cần tham chiếu đến những đối tượng có sẵn.</span></div>
</div>
<div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: white; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Trong nhiều ngôn ngữ prototype có một đối tượng trực thuộc đối tượng gốc thường gọi là Object, Đối tượng này được cài đặt như nguyên mẫu mặc định cho mọi đối tượng sinh ra khi chương trình đang chạy và mang theo những phương thức phổ dụng cần thiết như toString để trả về chuỗi mô tả của đối tượng. Một khía cạnh hữu ích của việc tạo ra đối tượng rỗng là để đảm bảo rằng tên của các đối tượng mới tạo ra không bị đụng chạm với đối tượng Object ở tầng cao nhất. (Trong bản sửa đổi Javascript của Mozilla, người ta có thể làm điều này bằng cách thiết lập giá trị </span><span style="background-color: white; color: black; font-family: Arial; font-size: 15px; font-style: italic; font-variant: normal; font-weight: bold; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">null</span><span style="background-color: white; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"> cho thuộc tính </span><span style="background-color: white; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: bold; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">__proto__ </span><span style="background-color: white; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">của đối tượng mới tạo ra).</span><br />
<span style="background-color: white; font-family: Arial; font-size: 15px; line-height: 1.15; white-space: pre-wrap;"><br /></span>
<span style="background-color: white; font-family: Arial; font-size: 15px; line-height: 1.15; white-space: pre-wrap;">Bản sao của đối tượng tham chiếu tới tiến trình nơi mà qua đó nó được kiến tạo bằng cách sao chép các phương thức của một đối tượng sẵn có (nguyên mẫu của nó). Đối tượng mới mang theo mọi đặc tính của đối tượng gốc. Từ điểm này, đối tượng mới có thể được hiệu chỉnh. Trong một vài ngôn ngữ, đối tượng phái sinh duy trì một kết nối trực tiếp với nguyên mẫu của nó và những thay đổi trong nguyên mẫu sẽ kéo theo những thay đổi tại bản sao. Những ngôn ngữ khác, như Kevo, một ngôn ngữ lập trình Forth-like, không ánh xạ những thay đổi từ nguyên mẫu sang bản sao theo cách này mà hướng đến một mô hình liên thông tự nhiên hơn nơi mà những thay đổi trong đối tượng được sao chép không tự động ánh xạ tới các thế hệ bản sao kế tiếp của chúng.</span><br />
<span style="background-color: #f9f9f9; color: #006600; font-family: Verdana; font-size: 13px; font-style: italic; line-height: 1.2; white-space: pre-wrap;"><br /></span>
<span style="background-color: #f9f9f9; color: #006600; font-family: Verdana; font-size: 13px; font-style: italic; line-height: 1.2; white-space: pre-wrap;">// Example of true prototypal inheritance style</span></div>
<div dir="ltr" style="line-height: 1.2; margin-bottom: 0pt; margin-left: 4pt; margin-top: 0pt;">
<span style="background-color: #f9f9f9; color: #006600; font-family: Verdana; font-size: 13px; font-style: italic; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">// in JavaScript.</span><br />
<span style="background-color: #f9f9f9; color: #006600; font-family: Verdana; font-size: 13px; font-style: italic; line-height: 1.2; white-space: pre-wrap;"><br /></span>
<span style="background-color: #f9f9f9; color: #006600; font-family: Verdana; font-size: 13px; font-style: italic; line-height: 1.2; white-space: pre-wrap;">// "ex nihilo" object creation using the literal</span></div>
<div dir="ltr" style="line-height: 1.2; margin-bottom: 0pt; margin-left: 4pt; margin-top: 0pt;">
<span style="background-color: #f9f9f9; color: #006600; font-family: Verdana; font-size: 13px; font-style: italic; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">// object notation {}.</span></div>
<div dir="ltr" style="line-height: 1.2; margin-bottom: 0pt; margin-left: 4pt; margin-top: 0pt;">
<span style="background-color: #f9f9f9; color: #000066; font-family: Verdana; font-size: 13px; font-style: normal; font-variant: normal; font-weight: bold; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">var</span><span style="background-color: #f9f9f9; color: black; font-family: Verdana; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"> foo </span><span style="background-color: #f9f9f9; color: #339933; font-family: Verdana; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">=</span><span style="background-color: #f9f9f9; color: black; font-family: Verdana; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"> </span><span style="background-color: #f9f9f9; color: #009900; font-family: Verdana; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">{</span><span style="background-color: #f9f9f9; color: black; font-family: Verdana; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">name</span><span style="background-color: #f9f9f9; color: #339933; font-family: Verdana; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">:</span><span style="background-color: #f9f9f9; color: black; font-family: Verdana; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"> </span><span style="background-color: #f9f9f9; color: #3366cc; font-family: Verdana; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">"foo"</span><span style="background-color: #f9f9f9; color: #339933; font-family: Verdana; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">,</span><span style="background-color: #f9f9f9; color: black; font-family: Verdana; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"> one</span><span style="background-color: #f9f9f9; color: #339933; font-family: Verdana; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">:</span><span style="background-color: #f9f9f9; color: black; font-family: Verdana; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"> </span><span style="background-color: #f9f9f9; color: #cc0000; font-family: Verdana; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">1</span><span style="background-color: #f9f9f9; color: #339933; font-family: Verdana; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">,</span><span style="background-color: #f9f9f9; color: black; font-family: Verdana; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"> two</span><span style="background-color: #f9f9f9; color: #339933; font-family: Verdana; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">:</span><span style="background-color: #f9f9f9; color: black; font-family: Verdana; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"> </span><span style="background-color: #f9f9f9; color: #cc0000; font-family: Verdana; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">2</span><span style="background-color: #f9f9f9; color: #009900; font-family: Verdana; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">}</span><span style="background-color: #f9f9f9; color: #339933; font-family: Verdana; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">;</span></div>
<div dir="ltr" style="line-height: 1.2; margin-bottom: 0pt; margin-left: 4pt; margin-top: 0pt;">
<span style="background-color: #f9f9f9; color: #006600; font-family: Verdana; font-size: 13px; font-style: italic; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">// Another "ex nihilo" object.</span></div>
<div dir="ltr" style="line-height: 1.2; margin-bottom: 0pt; margin-left: 4pt; margin-top: 0pt;">
<span style="background-color: #f9f9f9; color: #000066; font-family: Verdana; font-size: 13px; font-style: normal; font-variant: normal; font-weight: bold; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">var</span><span style="background-color: #f9f9f9; color: black; font-family: Verdana; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"> bar </span><span style="background-color: #f9f9f9; color: #339933; font-family: Verdana; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">=</span><span style="background-color: #f9f9f9; color: black; font-family: Verdana; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"> </span><span style="background-color: #f9f9f9; color: #009900; font-family: Verdana; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">{</span><span style="background-color: #f9f9f9; color: black; font-family: Verdana; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">two</span><span style="background-color: #f9f9f9; color: #339933; font-family: Verdana; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">:</span><span style="background-color: #f9f9f9; color: black; font-family: Verdana; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"> </span><span style="background-color: #f9f9f9; color: #3366cc; font-family: Verdana; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">"two"</span><span style="background-color: #f9f9f9; color: #339933; font-family: Verdana; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">,</span><span style="background-color: #f9f9f9; color: black; font-family: Verdana; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"> three</span><span style="background-color: #f9f9f9; color: #339933; font-family: Verdana; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">:</span><span style="background-color: #f9f9f9; color: black; font-family: Verdana; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"> </span><span style="background-color: #f9f9f9; color: #cc0000; font-family: Verdana; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">3</span><span style="background-color: #f9f9f9; color: #009900; font-family: Verdana; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">}</span><span style="background-color: #f9f9f9; color: #339933; font-family: Verdana; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">;</span><br />
<span style="background-color: #f9f9f9; color: #006600; font-family: Verdana; font-size: 13px; font-style: italic; line-height: 1.2; white-space: pre-wrap;"><br /></span>
<span style="background-color: #f9f9f9; color: #006600; font-family: Verdana; font-size: 13px; font-style: italic; line-height: 1.2; white-space: pre-wrap;">// Gecko and Webkit JavaScript engines can directly</span></div>
<div dir="ltr" style="line-height: 1.2; margin-bottom: 0pt; margin-left: 4pt; margin-top: 0pt;">
<span style="background-color: #f9f9f9; color: #006600; font-family: Verdana; font-size: 13px; font-style: italic; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">// manipulate the internal prototype link.</span><br />
<span style="background-color: #f9f9f9; color: #006600; font-family: Verdana; font-size: 13px; font-style: italic; line-height: 1.2; white-space: pre-wrap;"><br /></span>
<span style="background-color: #f9f9f9; color: #006600; font-family: Verdana; font-size: 13px; font-style: italic; line-height: 1.2; white-space: pre-wrap;">// For the sake of simplicity, let us pretend</span></div>
<div dir="ltr" style="line-height: 1.2; margin-bottom: 0pt; margin-left: 4pt; margin-top: 0pt;">
<span style="background-color: #f9f9f9; color: #006600; font-family: Verdana; font-size: 13px; font-style: italic; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">// that the following line works regardless of the</span><br />
<span style="background-color: #f9f9f9; color: #006600; font-family: Verdana; font-size: 13px; font-style: italic; line-height: 1.2; white-space: pre-wrap;"><br /></span>
<span style="background-color: #f9f9f9; color: #006600; font-family: Verdana; font-size: 13px; font-style: italic; line-height: 1.2; white-space: pre-wrap;">// engine used:</span></div>
<div dir="ltr" style="line-height: 1.2; margin-bottom: 0pt; margin-left: 4pt; margin-top: 0pt;">
<span style="background-color: #f9f9f9; color: black; font-family: Verdana; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">bar.</span><span style="background-color: #f9f9f9; color: #000066; font-family: Verdana; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">__proto__</span><span style="background-color: #f9f9f9; color: black; font-family: Verdana; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"> </span><span style="background-color: #f9f9f9; color: #339933; font-family: Verdana; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">=</span><span style="background-color: #f9f9f9; color: black; font-family: Verdana; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"> foo</span><span style="background-color: #f9f9f9; color: #339933; font-family: Verdana; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">;</span><span style="background-color: #f9f9f9; color: black; font-family: Verdana; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"> </span><span style="background-color: #f9f9f9; color: #006600; font-family: Verdana; font-size: 13px; font-style: italic; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">// foo is now the prototype of bar.</span><br />
<span style="background-color: #f9f9f9; color: #006600; font-family: Verdana; font-size: 13px; font-style: italic; line-height: 1.2; white-space: pre-wrap;"><br /></span>
<span style="background-color: #f9f9f9; color: #006600; font-family: Verdana; font-size: 13px; font-style: italic; line-height: 1.2; white-space: pre-wrap;">// If we try to access foo's properties from bar</span></div>
<div dir="ltr" style="line-height: 1.2; margin-bottom: 0pt; margin-left: 4pt; margin-top: 0pt;">
<span style="background-color: #f9f9f9; color: #006600; font-family: Verdana; font-size: 13px; font-style: italic; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">// from now on, we'll succeed.</span><br />
<span style="background-color: #f9f9f9; color: black; font-family: Verdana; font-size: 13px; vertical-align: baseline; white-space: pre-wrap;">bar.</span><span style="background-color: #f9f9f9; color: #660066; font-family: Verdana; font-size: 13px; vertical-align: baseline; white-space: pre-wrap;">one</span><span style="background-color: #f9f9f9; color: black; font-family: Verdana; font-size: 13px; vertical-align: baseline; white-space: pre-wrap;"> </span><span style="background-color: #f9f9f9; color: #006600; font-family: Verdana; font-size: 13px; font-style: italic; vertical-align: baseline; white-space: pre-wrap;">// Resolves to 1.</span><br />
<span style="background-color: #f9f9f9; color: #006600; font-family: Verdana; font-size: 13px; font-style: italic; vertical-align: baseline; white-space: pre-wrap;"><br /></span>
<span style="background-color: #f9f9f9; color: #006600; font-family: Verdana; font-size: 13px; font-style: italic; line-height: 1.2; white-space: pre-wrap;">// The child object's properties are also accessible.</span><br />
<span style="background-color: #f9f9f9; color: black; font-family: Verdana; font-size: 13px; vertical-align: baseline; white-space: pre-wrap;">bar.</span><span style="background-color: #f9f9f9; color: #660066; font-family: Verdana; font-size: 13px; vertical-align: baseline; white-space: pre-wrap;">three</span><span style="background-color: #f9f9f9; color: black; font-family: Verdana; font-size: 13px; vertical-align: baseline; white-space: pre-wrap;"> </span><span style="background-color: #f9f9f9; color: #006600; font-family: Verdana; font-size: 13px; font-style: italic; vertical-align: baseline; white-space: pre-wrap;">// Resolves to 3.</span><br />
<span style="background-color: #f9f9f9; color: #006600; font-family: Verdana; font-size: 13px; font-style: italic; line-height: 1.2; white-space: pre-wrap;"><br /></span>
<span style="background-color: #f9f9f9; color: #006600; font-family: Verdana; font-size: 13px; font-style: italic; line-height: 1.2; white-space: pre-wrap;">// Own properties shadow prototype properties</span></div>
<div dir="ltr" style="line-height: 1.2; margin-bottom: 0pt; margin-left: 4pt; margin-top: 0pt;">
<span style="background-color: #f9f9f9; color: black; font-family: Verdana; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">bar.</span><span style="background-color: #f9f9f9; color: #660066; font-family: Verdana; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">two</span><span style="background-color: #f9f9f9; color: #339933; font-family: Verdana; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">;</span><span style="background-color: #f9f9f9; color: black; font-family: Verdana; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"> </span><span style="background-color: #f9f9f9; color: #006600; font-family: Verdana; font-size: 13px; font-style: italic; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">// Resolves to "two"</span><br />
<span style="background-color: #f9f9f9; color: black; font-family: Verdana; font-size: 13px; vertical-align: baseline; white-space: pre-wrap;"><br /></span>
<span style="background-color: #f9f9f9; color: black; font-family: Verdana; font-size: 13px; vertical-align: baseline; white-space: pre-wrap;">foo.</span><span style="background-color: #f9f9f9; color: #660066; font-family: Verdana; font-size: 13px; vertical-align: baseline; white-space: pre-wrap;">name</span><span style="background-color: #f9f9f9; color: #339933; font-family: Verdana; font-size: 13px; vertical-align: baseline; white-space: pre-wrap;">;</span><span style="background-color: #f9f9f9; color: black; font-family: Verdana; font-size: 13px; vertical-align: baseline; white-space: pre-wrap;"> </span><span style="background-color: #f9f9f9; color: #006600; font-family: Verdana; font-size: 13px; font-style: italic; vertical-align: baseline; white-space: pre-wrap;">// unaffected, resolves to "foo"</span><br />
<span style="background-color: #f9f9f9; color: black; font-family: Verdana; font-size: 13px; vertical-align: baseline; white-space: pre-wrap;">bar.</span><span style="background-color: #f9f9f9; color: #660066; font-family: Verdana; font-size: 13px; vertical-align: baseline; white-space: pre-wrap;">name</span><span style="background-color: #f9f9f9; color: #339933; font-family: Verdana; font-size: 13px; vertical-align: baseline; white-space: pre-wrap;">;</span><span style="background-color: #f9f9f9; color: black; font-family: Verdana; font-size: 13px; vertical-align: baseline; white-space: pre-wrap;"> </span><span style="background-color: #f9f9f9; color: #006600; font-family: Verdana; font-size: 13px; font-style: italic; vertical-align: baseline; white-space: pre-wrap;">// Resolves to "foo"</span><br />
<span style="background-color: white; color: black; font-family: Arial; font-size: 13px; vertical-align: baseline; white-space: pre-wrap;"><br /></span>
<span style="background-color: white; color: black; font-family: Arial; font-size: 13px; vertical-align: baseline; white-space: pre-wrap;">Ví dụ sau viết với Javascript 1.8.5 + (xem thêm :</span><a href="http://kangax.github.io/es5-compat-table/" style="line-height: 1.15; text-decoration: none;"><span style="background-color: white; color: black; font-family: Arial; font-size: 13px; vertical-align: baseline; white-space: pre-wrap;"> </span><span style="background-color: white; color: #1155cc; font-family: Arial; font-size: 15px; text-decoration: underline; vertical-align: baseline; white-space: pre-wrap;">http://kangax.github.io/es5-compat-table/</span></a><span style="background-color: white; color: black; font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;">)</span><br />
<span style="background-color: white; color: #000066; font-family: Arial; font-size: 15px; font-weight: bold; vertical-align: baseline; white-space: pre-wrap;"><br /></span>
<span style="background-color: white; color: #000066; font-family: Arial; font-size: 15px; font-weight: bold; vertical-align: baseline; white-space: pre-wrap;">var</span><span style="background-color: white; color: black; font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;"> foo </span><span style="background-color: white; color: #339933; font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;">=</span><span style="background-color: white; color: black; font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;"> </span><span style="background-color: white; color: #009900; font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;">{</span><span style="background-color: white; color: black; font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;">one</span><span style="background-color: white; color: #339933; font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;">:</span><span style="background-color: white; color: black; font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;"> </span><span style="background-color: white; color: #cc0000; font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;">1</span><span style="background-color: white; color: #339933; font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;">,</span><span style="background-color: white; color: black; font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;"> two</span><span style="background-color: white; color: #339933; font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;">:</span><span style="background-color: white; color: black; font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;"> </span><span style="background-color: white; color: #cc0000; font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;">2</span><span style="background-color: white; color: #009900; font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;">}</span><span style="background-color: white; color: #339933; font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;">;</span></div>
<div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-left: 4pt; margin-top: 0pt;">
<span style="background-color: white; color: #006600; font-family: Arial; font-size: 15px; font-style: italic; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">// bar.[[ prototype ]] = foo</span></div>
<div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-left: 4pt; margin-top: 0pt;">
<span style="background-color: white; color: #000066; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: bold; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">var</span><span style="background-color: white; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"> bar </span><span style="background-color: white; color: #339933; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">=</span><span style="background-color: white; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"> Object.</span><span style="background-color: white; color: #660066; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">create</span><span style="background-color: white; color: #009900; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">(</span><span style="background-color: white; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"> foo </span><span style="background-color: white; color: #009900; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">)</span><span style="background-color: white; color: #339933; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">;</span></div>
<div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-left: 4pt; margin-top: 0pt;">
<span style="background-color: white; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">bar.</span><span style="background-color: white; color: #660066; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">three</span><span style="background-color: white; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"> </span><span style="background-color: white; color: #339933; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">=</span><span style="background-color: white; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"> </span><span style="background-color: white; color: #cc0000; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">3</span><span style="background-color: white; color: #339933; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">;</span></div>
<div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-left: 4pt; margin-top: 0pt;">
<span style="background-color: white; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">bar.</span><span style="background-color: white; color: #660066; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">one</span><span style="background-color: white; color: #339933; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">;</span><span style="background-color: white; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"> </span><span style="background-color: white; color: #006600; font-family: Arial; font-size: 15px; font-style: italic; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">// 1</span></div>
<div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-left: 4pt; margin-top: 0pt;">
<span style="background-color: white; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">bar.</span><span style="background-color: white; color: #660066; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">two</span><span style="background-color: white; color: #339933; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">;</span><span style="background-color: white; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"> </span><span style="background-color: white; color: #006600; font-family: Arial; font-size: 15px; font-style: italic; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">// 2</span></div>
<div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-left: 4pt; margin-top: 0pt;">
<span style="background-color: white; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">bar.</span><span style="background-color: white; color: #660066; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">three</span><span style="background-color: white; color: #339933; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">;</span><span style="background-color: white; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"> </span><span style="background-color: white; color: #006600; font-family: Arial; font-size: 15px; font-style: italic; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">// 3</span><br />
<span style="background-color: white; color: black; font-family: Arial; font-size: 15px; font-weight: bold; vertical-align: baseline; white-space: pre-wrap;"><br /></span>
<span style="background-color: white; color: black; font-family: Arial; font-size: 15px; font-weight: bold; vertical-align: baseline; white-space: pre-wrap;">Sự ủy quyền </span><span style="background-color: white; color: black; font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;">(Delegation)</span><br />
<span style="background-color: white; font-family: Arial; font-size: 15px; line-height: 1.15; white-space: pre-wrap;"><br /></span>
<span style="background-color: white; font-family: Arial; font-size: 15px; line-height: 1.15; white-space: pre-wrap;">Các ngôn ngữ dựa trên prototype luôn sử dụng cơ chế ủy quyền. Chương trình khi thực thi có thể gửi đi phương thức chính xác hóa hoặc tìm kiếm phần dữ liệu cần thiết theo một loạt các con trỏ ủy quyền (từ đối tượng tới nguyên mẫu của nó) cho tới khi tìm thấy so khớp. Điều này yêu cầu thiếp lập chia sẻ phương thức giữa các đối tượng với con trỏ ủy quyền. Không giống quan hệ giữa lớp với hiện thể trong các ngôn ngữ OOP dựa trên lớp, quan hệ giữa nguyên mẫu với mỗi nhánh của nó không yêu cầu đối tượng phải đồng nhất về cấu trúc hoặc vùng bộ nhớ, ngoại trừ liên kết ủy quyền nói trên. Như vậy, đối tượng phái sinh có thể tiếp tục được hiệu chỉnh và sửa đổi qua thời gian mà không cần sắp xếp lại cấu trúc nguyên mẫu liên đới như trong các ngôn ngữ dựa trên class. Cũng cần chỉ ra rằng không chỉ dữ liệu mà cả các phương thức cũng có thể thêm vào hoặc thay đổi được. Vì lý do này, một vài ngôn ngữ hướng prototype coi dữ liệu và phương thức như các "slots" hoặc "members".</span><br />
<span style="background-color: white; color: black; font-family: Arial; font-size: 15px; font-weight: bold; vertical-align: baseline; white-space: pre-wrap;"><br /></span>
<span style="background-color: white; color: black; font-family: Arial; font-size: 15px; font-weight: bold; vertical-align: baseline; white-space: pre-wrap;">Sự liên thông </span><span style="background-color: white; color: black; font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;">(Concatenation)</span><br />
<span style="background-color: white; font-family: Arial; font-size: 15px; line-height: 1.15; white-space: pre-wrap;"><br /></span>
<span style="background-color: white; font-family: Arial; font-size: 15px; line-height: 1.15; white-space: pre-wrap;">Nhìn vào mô hình lập trình dựa trên prototype thuần túy, cũng như các tham khảo về mô hình prototype liên thông và ví dụ đưa ra trong ngôn ngữ Kevo, không có con trỏ hoặc liên kết tới nguyên mẫu gốc từ một đối tượng được sao chép. Đối tượng nguyên mẫu (cha) thiên về một bản sao hơn là một liên kết tham chiếu. Kết quả là sự thay đổi trong nguyên mẫu sẽ không tác động gì đến các bản sao.</span><br />
<span style="background-color: white; font-family: Arial; font-size: 15px; line-height: 1.15; white-space: pre-wrap;"><br /></span>
<span style="background-color: white; font-family: Arial; font-size: 15px; line-height: 1.15; white-space: pre-wrap;">Khác biệt chính mang tính khái niệm dưới trật tự này là các thay đổi được thực hiện trên đối tượng nguyên mẫu không bị đem sang các bản sao. Có thể nhìn nhận điều này như ưu điểm hoặc hạn chế. (Dù sao Kevo cung cấp các bản gốc thêm vào để cho phép mang những thay đổi sang các tập đối tượng dựa vào sự giống nhau của chúng - do đó gọi là "family resemblances" (tương đồng quyến thuộc) - hơn là thông qua sự phân loại nguồn gốc, như đặc thù trong mô hình ủy nhiệm. Đôi khi người ta cũng cho rằng mô hình nguyên mẫu dựa trên ủy quyền có một bất lợi ở chỗ các thay đổi trên đối tượng con có thể ảnh hưởng đến sự hoạt động của đối tượng cha sau đó. Dù vấn đề này không phải là cố hữu đối với mô hình nguyên mẫu dựa trên ủy quyền và không tồn tại trong các ngôn ngữ dựa trên ủy quyền, như Javascript, có sự đảm bảo các thay đổi ở đối tượng con luôn được lưu lại trong chính nó và không bao giờ ảnh hưởng tới đối tượng cha (ví dụ giá trị của đối tượng con làm nhạt giá trị của đối tượng cha hơn là thay đổi nó).</span><br />
<span style="background-color: white; color: black; font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;"><br /></span>
<span style="background-color: white; color: black; font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;">Trong các bổ sung chú trọng tính đơn giản, mô hình prototype liên thông dò tìm thành viên nhanh hơn mô hình ủy nhiệm (vì không cần đi theo chain của đối tượng cha), nhưng ngược lại nó cũng tốn bộ nhớ hơn vì tất cả các thành viên đều được copy ra thay vị hiện diện như một đơn thể tham chiếu tới đối tượng cha. Các bản bổ sung phức tạp hơn có thể không bị những vấn đề này nhưng nhìn chung vẫn là một cuộc đổi chác giữa tốc độ và lượng bộ nhớ cần sử dụng. Ví dụ, các ngôn ngữ nguyên mẫu ràng buộc có thể sử dụng một bổ sung copy-on-write</span><span style="background-color: white; color: black; font-family: Arial; font-size: 10px; vertical-align: super; white-space: pre-wrap;"> (5)</span><span style="background-color: white; color: black; font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;"> để cho phép chia sẻ dữ liệu ở hậu cảnh - đây cũng là hướng tiếp cận của Kevo. Ngược lại, các ngôn ngữ với nguyên mẫu dựa trên cơ chế ủy quyền có thể sử dụng cache để tăng tốc truy vấn dữ liệu.</span><br />
<span style="background-color: white; font-family: Arial; font-size: 15px; font-weight: bold; line-height: 1.15; white-space: pre-wrap;"><br /></span>
<span style="background-color: white; font-family: Arial; font-size: 15px; font-weight: bold; line-height: 1.15; white-space: pre-wrap;">Lời bình</span><br />
<span style="background-color: white; font-family: Arial; font-size: 15px; line-height: 1.15; white-space: pre-wrap;"><br /></span>
<span style="background-color: white; font-family: Arial; font-size: 15px; line-height: 1.15; white-space: pre-wrap;">Có thể thấy rằng những người ủng hộ mô hình class thường có xu hướng phê bình các ngôn ngữ prototype trên một số điểm tương tự như những gì mà phe chủ chương định kiểu tĩnh phê bình các ngôn ngữ định kiểu động. Thông thường là về tính chính xác, sự chắc chắn, khả năng tiên liệu, hiệu quả chương trình và mức độ thân thiện đối với lập trình viên.</span><br />
<span style="background-color: white; font-family: Arial; font-size: 15px; line-height: 1.15; white-space: pre-wrap;"><br /></span>
<span style="background-color: white; font-family: Arial; font-size: 15px; line-height: 1.15; white-space: pre-wrap;">Ở ba điểm đầu tiên, các class thường được xem như giống nhau về kiểu (chúng đáp ứng vai trò đó trong hầu hết các ngôn ngữ lập trình hướng đối tượng định kiểu tĩnh) và được đề xuất đề cung cấp một cách chính xác cho các hiện thể của chúng cũng như để người dùng các hiện thể này khu xử chúng theo một vài kiểu cách cho trước.</span><br />
<span style="background-color: white; font-family: Arial; font-size: 15px; line-height: 1.15; white-space: pre-wrap;"><br /></span>
<span style="background-color: white; font-family: Arial; font-size: 15px; line-height: 1.15; white-space: pre-wrap;">Liên quan đến tính hiệu quả, khai báo các lớp đơn giản hóa sự tối ưu trình biên dịch mà cho phép phát triển khả năng tìm kiếm phương thức và thuộc tính của hiện thể hiệu quả. Như Self, phần lớn thời gian phát triển dùng vào các kỹ thuật phát triển, biên dịch và thông dịch để tăng cường hiệu suất cho các ngôn ngữ prototype trên cơ sở so sánh với các ngôn ngữ dựa trên class.</span><br />
<span style="background-color: white; font-family: Arial; font-size: 15px; line-height: 1.15; white-space: pre-wrap;"><br /></span>
<span style="background-color: white; font-family: Arial; font-size: 15px; line-height: 1.15; white-space: pre-wrap;">Một chỉ trích phổ biến nhằm vào các ngôn ngữ dựa trên prototype là thiếu tính thân thiện đối với cộng đồng phát triển phần mềm, bất chấp tính đại chúng và sức lan tỏa sâu rộng của Javascript.</span><br />
<span style="background-color: white; font-family: Arial; font-size: 15px; line-height: 1.15; white-space: pre-wrap;"><br /></span>
<span style="background-color: white; font-family: Arial; font-size: 15px; line-height: 1.15; white-space: pre-wrap;">Cấp độ hiểu biết về các ngôn ngữ prototype xem ra đang có chiều hướng thay đổi nhờ vào sự tăng trưởng của các framework Javascript và đang nâng cao hơn nữa theo sự ứng dụng Javascript phức tạp trong giai đoạn chín muồi của Web 2.0.</span></div>
<b style="font-weight: normal;"><br /><span style="background-color: white; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"></span></b>
<br />
<div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt; text-align: right;">
<span style="background-color: white; color: black; font-family: Arial; font-size: 15px; font-style: italic; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Nguồn :</span><a href="http://en.wikipedia.org/wiki/Prototype-based_programming" style="text-decoration: none;"><span style="background-color: white; color: black; font-family: Arial; font-size: 15px; font-style: italic; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"> </span><span style="background-color: white; color: #1155cc; font-family: Arial; font-size: 15px; font-style: italic; font-variant: normal; font-weight: normal; text-decoration: underline; vertical-align: baseline; white-space: pre-wrap;">Prototype-based programming</span></a><span style="background-color: white; color: black; font-family: Arial; font-size: 15px; font-style: italic; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">, Wikipedia.</span></div>
<div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt; text-align: center;">
<span style="background-color: white; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">___________________________________________</span></div>
<b style="font-weight: normal;"><br /><span style="background-color: white; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"></span></b>
<br />
<div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: white; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: bold; text-decoration: underline; vertical-align: baseline; white-space: pre-wrap;">Chú thích :</span></div>
<b style="font-weight: normal;"><br /><span style="background-color: white; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: bold; text-decoration: underline; vertical-align: baseline; white-space: pre-wrap;"></span></b>
<br />
<div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: white; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">1. </span><span style="background-color: white; color: black; font-family: Arial; font-size: 15px; font-style: italic; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Horizontal inheritance programming</span><span style="background-color: white; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"> : khái niệm này không được nhắc đến trong bài gốc, người dịch bổ sung thêm cho đủ ý.</span></div>
<div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: white; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">2. Nguyên văn : </span><span style="background-color: white; color: black; font-family: Arial; font-size: 15px; font-style: italic; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">"usable" objects</span><span style="background-color: white; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">. Sở dĩ nói như vậy vì trong các ngôn ngữ dựa trên class, người ta thường phải gọi phương thức của class một cách gián tiếp qua hiện thể thay vì gọi trực tiếp đến class. Ngược lại, trong các ngôn ngữ lập trình dựa trên prototype, nguyên mẫu hay đối tượng gốc cũng chỉ là đối tượng.</span></div>
<div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: white; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">3. Nguyên văn : </span><span style="background-color: white; color: black; font-family: Arial; font-size: 15px; font-style: italic; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">constructor function</span><span style="background-color: white; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">. Các tác giả Việt Nam thời trước thường dịch là "hàm dựng". Ngày nay nghe hai chữ "hàm dựng" có vẻ hơi tối nghĩa.</span></div>
<div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: white; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">4. Nguyên văn : </span><span style="background-color: white; color: black; font-family: Arial; font-size: 15px; font-style: italic; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">ex nihilo object creation</span><span style="background-color: white; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">. Ý là việc tạo ra đối tượng từ chỗ không có gì cả. Cụm từ Latin "ex nihilo" có nghĩa là từ trong cái trống rỗng, </span><span style="background-color: white; color: #222222; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">từ hư không.</span><a href="http://en.wikipedia.org/wiki/Ex_nihilo" style="text-decoration: none;"><span style="background-color: white; color: #222222; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"> </span><span style="background-color: white; color: #1155cc; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: underline; vertical-align: baseline; white-space: pre-wrap;">Xem chi tiết</span></a><span style="background-color: white; color: #222222; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">.</span></div>
<div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: white; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">5. Copy-on-write : viết tắt COW, một biện pháp tối ưu hóa sử dụng trong lập trình.</span><a href="http://en.wikipedia.org/wiki/Copy-on-write" style="text-decoration: none;"><span style="background-color: white; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"> </span><span style="background-color: white; color: #1155cc; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: underline; vertical-align: baseline; white-space: pre-wrap;">Xem chi tiết</span></a><span style="background-color: white; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">.</span></div>
<br />
<span style="background-color: white; font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;"></span><br />
<span style="background-color: white; font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;"></span><br />
<div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: white; color: #222222; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">(Kỳ tới : </span><a href="http://elegantcode.com/2013/03/22/basic-javascript-prototypical-inheritance-vs-functional-inheritance/" style="text-decoration: none;"><span style="background-color: white; color: #1155cc; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: underline; vertical-align: baseline; white-space: pre-wrap;">Basic JavaScript: Prototypical Inheritance vs. Functional Inheritance</span></a><span style="background-color: white; color: #222222; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">)</span><span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"></span><br />
<span style="background-color: white; color: #222222; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><br /></span>
<span style="background-color: white; color: #222222; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><i style="box-sizing: border-box; color: #101010; font-family: Arial, Helvetica, sans-serif; font-size: 12px; line-height: 24.59375px; white-space: normal;"><span style="box-sizing: border-box;">Bài cũng được đăng tại </span><a href="http://toancauxanh.vn/news/technology/lap-trinh-dua-tren-nguyen-mau" style="-webkit-transition: all 0.4s ease-in-out; box-sizing: border-box; color: #62929e; transition: all 0.4s ease-in-out;" target="_blank"><span style="box-sizing: border-box;">http://toancauxanh.vn</span></a></i></span></div>
Dong Nguyenhttp://www.blogger.com/profile/08315900287977325135noreply@blogger.comtag:blogger.com,1999:blog-4828609964961329038.post-61563860504777555292013-02-25T00:02:00.002+07:002014-01-16T13:38:29.835+07:00Tôi đã cài đặt ChromeOS như thế nào?<br />
Ngay từ khi ChromeOS mới ra mắt, tôi đã thử trải nghiệm phiên bản Chrominum qua môi trường giả lập với VirtualBox. Sau đó, tôi cũng test thêm bằng việc cài đặt lên flash disk. Cả hai cách này đều dễ thực hiện và cho tôi những cảm nhận ban đầu về một hệ điều hành rất phù hợp với cá tính. Tuy nhiên, đó đều là những trải nghiệm chưa trọn vẹn. Phải đến tuần trước, khi tôi mang về được một chiếc labtop Acer Aspire One giá rẻ, chỉ 5.8 triệu, tôi mới có thể thực hiện được ý đồ ấp ủ từ rất lâu: chuyển sang dùng hệ điều hành ChromeOS cài thẳng lên hard drive.<br />
<br />
Vậy là ngay khi có được chiếc máy này, việc đầu tiên tôi làm là cài đặt Linux Mint lên đó và dùng như HĐH cơ sở. Trên ổ cứng 320GB, tôi tạm cắt ra 120GB cho phân vùng Linux Mint. Từ đây, tôi sẽ tiến hành chuẩn bị các công cụ cần thiết cho việc install ChromeOS lên một phần khác của ổ cứng.<br />
<br />
Thực tế thì ChromeOS chỉ được cung cấp bởi Google. Họ xây dựng ra core OS và, tương tự cách làm với Android, họ hợp tác với các nhà sản xuất máy tính như Samsung, Acer, Dell... để chia lợi nhuận. Cái mà tôi sẽ dùng không phải thứ đó mà là một trong các phiên bản tùy biến được phát triển bởi những nhóm khác nhau, trong đó nổi bật hơn cả là phiên bản ChrominumOS trên <a href="http://chrominum.org/" target="_blank">chrominum.org</a> và phiên bản ChrominumOS Lime của <a href="http://hexxeh.net/" target="_blank">hexxeh.net</a> (thừa kế và mở rộng từ nhóm thứ nhất). Mỗi nhóm này đều có những điều chỉnh riêng dựa trên nhân ChromeOS và họ thường xuyên cập nhật, gần như mỗi ngày. Trước đó, khi đối chiếu với <a href="http://www.chromium.org/chromium-os/getting-dev-hardware/dev-hardware-list" target="_blank">danh sách phần cứng tương thích</a>, tôi đã biết rằng chiếc Acer Aspire One 756 không được hỗ trợ tốt ở phần wireless, nhưng vì Acer cũng là nhà sản xuất netbook ChromeOS, tôi vẫn tin rằng có giải pháp ở đâu đó. Tuy nhiên, tôi bắt đầu cảm thấy mùi vị của thất bại sau khi thử đi thử lại nhiều lần và luôn mắc kẹt lại ở lỗi wireless drivers. Lý do nằm ở card mạng hiệu Broadcom. <br />
<br />
May mắn thay, còn một phiên bản ChrominumOS khác, được cung cấp bởi Dell. Chính họ dùng lõi này để làm ra những chiếc netbook ChromeOS đang bán trên thị trường. Tôi tải nó xuống :<br />
<br />
<a href="http://linux.dell.com/files/cto/" target="_blank">http://linux.dell.com/files/cto/</a><br />
<br />
Có nhiều phiên bản khác nhau ở đó, tôi chọn bản mới nhất, ngày 20/3/2013, cùng với file instructions tương ứng. Các hướng dẫn trong instructions đủ để tôi cài đặt Chrome OS, ngoại trừ một lỗi nhỏ về local username, sẽ được nói đến sau.<br />
<br />
Quá trình cài đặt ChromeOS có thể gói gọn trong 5 bước :<br />
<ol>
<li>Từ trong Linux Mint, thực hiện việc cài đặt ChromeOS lên flash disk</li>
<li>Boot máy tính từ flash disk đó và cập nhật driver để nhận wifi</li>
<li>Reboot máy tính để vào lại Linux Mint, chia phân vùng cho ChromeOS</li>
<li>Copy dữ liệu từ flash disk lên các phân vùng ChromeOS</li>
<li>Cập nhật grub để có menu boot mong muốn</li>
</ol>
<br />
Tất cả chỉ đơn giản như vậy. Nếu thích thú, mời các bạn theo tôi...<br />
<br />
<br />
<b>1. Install ChromeOS lên flash disk</b><br />
<br />
Với file ChromiumOS_Feb20_2013.img.gz lấy từ Dell, tôi giải nén ra và dùng ImageWriter để tạo USB boot chứa ChromeOS. Flash disk của tôi có 4GB dung lượng. Nó sẽ bị format toàn bộ sau tiến trình writting.<br />
<br />
<b>2. Boot máy từ USB và cài driver wifi</b><br />
<br />
Khi ImageWriter hoàn tất tiến trình tạo tạo USB boot, flash disk của tôi lúc này có rất nhiều phân vùng, trong đó phân vùng C-ROOT chứa lõi HĐH và phân vùng C-STATE chứa các thiết lập của user là đáng để ý. Mọi dữ liệu sản sinh trong quá trình sử dụng ChromeOS đều sẽ nằm tại C-STATE. Tôi có thể chia các phân vùng tương ứng cho ChromeOS trên ổ cứng ngay từ lúc này, nhưng thay vào đó, tôi restart lại máy, kiểm tra bios settings để chắc chắn máy đang đặt chế độ ưu tiên cao nhất cho việc boot từ flash disk. Rất nhanh, tôi thấy giao diện khởi tạo của ChromeOS sau vài giây.<br />
<br />
Ở dòng "Select a network" lúc này đang bị disabled, tôi nhấn tổ hợp phím Ctrl+Alt+F2. Đây là một tổ hợp phím đặc biệt quan trọng với ChromeOS, nó cho phép bạn chuyển từ GUI sang giao diện dòng lệnh. <br />
<br />
Không thể đi vào trong HĐH khi mà network vô dụng, tôi phải chuyển sang chế độ command line. Tại đây, tôi nhập username "chronos" và password "dell1234" để đăng nhập local user. Trong introductions của Dell ghi username là "dell", nhưng không đúng như vậy. Sau đó, tôi gõ lệnh :<br />
<br />
<span style="color: #351c75;">sudo /etc/install_wl.sh</span><br />
<br />
Và enter. Chờ một chút cho wireless drivers được cài đặt xong, tôi restart lại máy, rút nhanh flash disk ra để boot vào Linux Mint.<br />
<br />
<b>3. Chia phân vùng và copy OS core sang hard drive</b><br />
<br />
Lúc này, trong Linux Mint, tôi cắm flash disk trở lại. Flash disk của tôi đã có ChromeOS với driver cần thiết cho kết nối mạng. <br />
<br />
Tôi mở GParted lên, truy cập vào flash disk (dev/sdb) xem thử. Nhìn bên trong nó khá rối ren, nhưng mặc kệ, tôi biết rằng chỉ cần quan tâm đến 2 phần, dev/sdb1 có label là C-ROOT và dev/sdb3 có label là C-STATE.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-sLaaGtZ2gnI/USpFocXSMUI/AAAAAAAACg0/TgS_q_HFnuQ/s1600/Screenshot-1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://3.bp.blogspot.com/-sLaaGtZ2gnI/USpFocXSMUI/AAAAAAAACg0/TgS_q_HFnuQ/s1600/Screenshot-1.png" height="270" width="400" /></a></div>
<div style="text-align: center;">
<i>Flash disk contains ChromeOS source</i></div>
<br />
Tiếp đó, tôi switch sang hard drive (dev/sba), nhấp vào vùng unallocated và tạo ra 1 partition mới với dung lượng 500MB, nhiều hơn so với phân vùng C-ROOT trên flash disk một chút. Có vẻ như hơi nhiều vì C-ROOT chỉ chứa lõi HĐH ChromeOS và như các bạn thấy, trong hình <span style="background-color: white;">trên</span>, nó sử dụng 236.96 MB.<br />
<div>
<br />
Tiếp đó, tôi tạo thêm 1 phân vùng nữa để chứa C-STATE, phân vùng này tùy ý, 1 GB cũng đủ, miễn rằng lớn hơn so với C-STATE trên flash disk. Đây đã là thời của cloud computing, mọi thứ đều ở trên những đám mây của Google, SkyDrive, DropBox... Khi download file trong ChromeOS, bạn có thể chọn lưu xuống máy hoặc lưu thẳng lên Google Drive. Nhưng dung lượng ổ cứng còn dư khá lớn, tôi quyết định dành cho nó hẳn 80GB.<br />
<br />
Bây giờ, việc cần làm là sao chép dữ liệu từ C-ROOT của flash disk sang C-ROOT của hard drive. Tôi mở Terminal lên và chạy lệnh sau :<br />
<br />
<span style="color: #351c75;">sudo dd if=/dev/sdb3 of=/dev/sda3 bs=4096</span><br />
<br />
<span style="background-color: white;">Trước khi chạy lệnh trên, t</span>ôi dùng GParted kiểm tra lại nhiều lần để chắc chắn việc sao chép phân vùng trên flash disk chứa C-ROOT (/dev/sdb1) sang đúng phân vùng trên hard drive sẽ chứa C-ROOT (/dev/sda4).<br />
<br />
Tiếp tục với C-STATE :<br />
<br />
<span style="color: #351c75;">sudo dd if=/dev/sdb1 of=/dev/sda4 bs=4096</span><br />
<br />
OK, vậy là xong bước thứ 3. </div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-MwxvOCgQyJk/USpGcYRORcI/AAAAAAAACg8/piUsI_cYcaE/s1600/Screenshot-4.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://3.bp.blogspot.com/-MwxvOCgQyJk/USpGcYRORcI/AAAAAAAACg8/piUsI_cYcaE/s1600/Screenshot-4.png" height="156" width="400" /></a></div>
<div>
<br /></div>
<div>
Lúc này, ổ cứng của tôi đã có 2 HĐH, Linux Mint ở sda2 và ChromeOS ở sda3 (còn sda1 chiếm 4GB đang dùng làm swap). Tôi cần điều chỉnh lại grub để sắp đặt thứ tự boot mong muốn và cũng để chọn ChromeOS làm default OS.<br />
<br />
<b>4. Chỉnh lại boot menu</b><br />
<br />
Ở bước này, tôi sẽ cần dùng đến Grub Customizer, chương trình quản lý menu boot trên dòng Ubuntu. Tôi nhớ nó nằm trên <a href="https://launchpad.net/grub-customizer" target="_blank">Launchpad</a>. Vì Linux Mint của tôi chưa có nên tôi install nhanh :<br />
<br />
<span style="color: #351c75;">sudo add-apt-repository ppa:danielrichter2007/grub-customizer<br />sudo apt-get update<br />sudo apt-get install grub-customizer</span><br />
<span style="color: #351c75;"><br /></span>
Khi tiến trình hoàn tất, tôi mở Grub Customizer lên. Trên tab "List configuration", tôi tìm OS tương ứng với sda3. Tên nó đang là "unknown...", tôi đổi thành ChromeOS và move lên trên cùng danh sách. Sau đó tôi chuyển sang tab "General settings" và chọn ChromeOS ở mục "default entry". Tại mục "visibility" tôi check lên <i>show menu</i> và đặt timeout bằng 5 (giây). Save lại.<br />
<br />
Cuối cùng, tôi tạm chia tay Linux Mint, restart lại máy và bắt đầu làm việc trên ChromeOS<span style="background-color: white;"> :)</span><br />
<span style="background-color: white;"><br /></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://plus.google.com/u/0/113270353763049199537/posts/fUWYkxcSjWo" target="_blank"><img border="0" src="http://2.bp.blogspot.com/-lg4w4vuaXlo/USh241R_d7I/AAAAAAAACgM/Vj1Xj4XF1nk/s1600/Screenshot+2013-02-23+at+14.57.51.png" height="179" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<b><u>Note</u></b> :<br />
<br />
- Bạn hoàn toàn có thể setup ChromeOS từ Ubuntu và các OS dòng Ubuntu theo cách tương tự.<br />
- Setup ChromeOS từ Windows cũng như thế, chỉ có tools thay đổi. Đề xuất dựa trên kinh nghiệm riêng của tôi là :<br />
<ul>
<li><a href="http://rufus.akeo.ie/">Rufus</a> thay cho ImageWriter</li>
<li><a href="http://www.partition-tool.com/personal.htm">EaseUS Partition Master</a> thay cho GParted</li>
<li><a href="http://neosmart.net/EasyBCD/">EasyBCD</a> thay cho Grub Customizer</li>
</ul>
<div>
<br /></div>
<div>
<br /></div>
Dong Nguyenhttp://www.blogger.com/profile/08315900287977325135noreply@blogger.comtag:blogger.com,1999:blog-4828609964961329038.post-62045774834057892712013-02-18T23:06:00.000+07:002015-10-14T23:51:03.252+07:00Tạo nhanh dev environment trên Linux Mint<em>(Cập nhật mới nhất vào ngày 12/3/2015)</em><br />
<br />
Linux Mint là một distro phát triển dựa trên Ubuntu, nhưng đi theo một hướng riêng biệt và nhất quán. Trong khi Ubuntu 10+ đột nhiên đẩy người dùng vào một giao diện unity lạ lẫm thì Mint vẫn trung thành với kiểu desktop thân thiện từ những ngày mới ra mắt nhưng lại cho người dùng khả năng tùy biến đến từng chi tiết. Nhiều người bắt đầu yêu thích Mint. Theo thống kê mới nhất của Distrowatch thì Linux Mint hiện đứng đầu trong danh sách các phiên bản Linux phổ biến, vượt xa so với Mageia hạng 2 và Ubuntu hạng 3.<br />
<br />
Tôi bắt đầu chuyển sang dùng Linux Mint từ đầu năm 2012 và vẫn đang rất hài lòng với nó. Bài viết này nhằm giới thiệu với các bạn những gì cần làm để tạo nhanh một web development environment sau khi cài đặt Linux Mint.<br />
<br />
<img alt="enter image description here" src="http://2.bp.blogspot.com/-1NUYVHfjQGQ/VQFQm9Vq0CI/AAAAAAAAHgA/Ju92Zu-yPjU/s1600/mint.jpg" title="" /><br />
<br />
Sau khi cài đặt, chúng ta muốn có: <br />
<ul>
<li>git</li>
<li>Node.js, npm, nginx, php5-fpm</li>
<li>MongoDB, Redis, MariaDB</li>
<li>Phalcon, MongoDB driver cho PHP</li>
<li>PhantomJS cho Node.js</li>
</ul>
Thoạt tiên, các bạn mở Terminal lên và chạy câu lệnh sau :<br />
<br />
<pre class="prettyprint"><code class=" hljs lasso">sudo apt<span class="hljs-attribute">-get</span> update
sudo apt<span class="hljs-attribute">-get</span> install python<span class="hljs-attribute">-software</span><span class="hljs-attribute">-properties</span>
sudo add<span class="hljs-attribute">-apt</span><span class="hljs-attribute">-repository</span> ppa:ondrej/php5<span class="hljs-subst">-</span><span class="hljs-number">5.6</span>
sudo add<span class="hljs-attribute">-apt</span><span class="hljs-attribute">-repository</span> ppa:nginx/stable
sudo apt<span class="hljs-attribute">-key</span> adv <span class="hljs-subst">--</span>keyserver hkp:<span class="hljs-comment">//keyserver.ubuntu.com:80 --recv 7F0CEB10</span>
echo <span class="hljs-string">'deb http://downloads-distro.mongodb.org/repo/ubuntu-upstart dist 10gen'</span> <span class="hljs-subst">|</span> sudo tee /etc/apt/sources<span class="hljs-built_in">.</span><span class="hljs-built_in">list</span><span class="hljs-built_in">.</span>d/mongodb<span class="hljs-built_in">.</span><span class="hljs-built_in">list</span>
sudo apt<span class="hljs-attribute">-get</span> update <span class="hljs-subst">&&</span> sudo apt<span class="hljs-attribute">-get</span> upgrade</code></pre>
<br />
Bước này khá mất thời gian, phải chờ khoảng 15 đến 30 phút để hệ thống cập nhật đầy đủ các packages còn thiếu và setup software resources.<br />
<br />
Ok, tiếp theo, các bạn chạy dòng lệnh sau để setup các thư viện hỗ trợ:<br />
<br />
<pre class="prettyprint"><code class=" hljs lasso">sudo apt<span class="hljs-attribute">-get</span> install g<span class="hljs-subst">++</span> make git git<span class="hljs-attribute">-core</span> curl build<span class="hljs-attribute">-essential</span> chrpath libssl<span class="hljs-attribute">-dev</span> libfontconfig1<span class="hljs-attribute">-dev</span> libxft<span class="hljs-attribute">-dev</span></code></pre>
<br />
Sau đó đến các modules cho PHP:<br />
<br />
<pre class="prettyprint"><code class=" hljs lasso">sudo apt<span class="hljs-attribute">-get</span> install php5 php5<span class="hljs-attribute">-dev</span> php5<span class="hljs-attribute">-cli</span> php5<span class="hljs-attribute">-imagick</span> php5<span class="hljs-attribute">-gd</span> php5<span class="hljs-attribute">-mcrypt</span> php5<span class="hljs-attribute">-curl</span> php5<span class="hljs-attribute">-fpm</span> php5<span class="hljs-attribute">-mysql</span> php5<span class="hljs-attribute">-json</span></code></pre>
<br />
Và lần lượt từng cái:<br />
<br />
<pre class="prettyprint"><code class=" hljs lasso">sudo apt<span class="hljs-attribute">-get</span> install mongodb<span class="hljs-attribute">-org</span>
sudo apt<span class="hljs-attribute">-get</span> install redis<span class="hljs-attribute">-server</span>
sudo apt<span class="hljs-attribute">-get</span> install mariadb<span class="hljs-attribute">-server</span>
sudo apt<span class="hljs-attribute">-get</span> install nginx</code></pre>
<br />
Chú ý khi cài đặt có thể các chương trình sẽ yêu cầu điền một số thông tin cấu hình.<br />
<br />
Dù sao tiến trình cũng phải hoàn tất, và bạn đã có mọi thứ cần thiết cho 1 PHP developer. Thư mục website nằm ở /var/www, thư mục file cấu hình server nginx nằm ở /etc/nginx/site-enabled. Bạn nên set quyền user của bạn lên các nơi đó - và file hosts để tiện sửa đổi - bằng các lệnh sau:<br />
<br />
<pre class="prettyprint"><code class=" hljs lasso">sudo chown <span class="hljs-attribute">-R</span> user /<span class="hljs-built_in">var</span>/www
sudo chown <span class="hljs-attribute">-R</span> user /etc/nginx/site<span class="hljs-attribute">-enabled</span>
sudo chown user /etc/hosts</code></pre>
<br />
Chúng ta tiếp tục cài đặt Node.js, phiên bản mới nhất là 0.12.0:<br />
<br />
<pre class="prettyprint"><code class=" hljs avrasm">wget http://nodejs<span class="hljs-preprocessor">.org</span>/dist/v0<span class="hljs-number">.12</span><span class="hljs-number">.0</span>/node-v0<span class="hljs-number">.12</span><span class="hljs-number">.0</span><span class="hljs-preprocessor">.tar</span><span class="hljs-preprocessor">.gz</span>
tar -zxvf node-v0<span class="hljs-number">.12</span><span class="hljs-number">.0</span><span class="hljs-preprocessor">.tar</span><span class="hljs-preprocessor">.gz</span>
cd node-v0<span class="hljs-number">.12</span><span class="hljs-number">.0</span>
./configure
make
sudo make install</code></pre>
<br />
Với Node.js mọi thứ rất đơn giản. Tiến trình build Node.js server từ mã nguồn mất khoảng 20 phút. Trong thời gian đó, bạn có thể cài đặt MongoDB driver cho PHP:<br />
<br />
<pre class="prettyprint"><code class=" hljs lasso">git clone https:<span class="hljs-comment">//github.com/mongodb/mongo-php-driver.git</span>
cd mongo<span class="hljs-attribute">-php</span><span class="hljs-attribute">-driver</span>
phpize
<span class="hljs-built_in">.</span>/configure
make <span class="hljs-literal">all</span>
sudo make install</code></pre>
<br />
Và thêm Phalcon:<br />
<br />
<pre class="prettyprint"><code class=" hljs bash">git clone --depth=<span class="hljs-number">1</span> git://github.com/phalcon/cphalcon.git
<span class="hljs-built_in">cd</span> cphalcon/build
<span class="hljs-built_in">sudo</span> ./install</code></pre>
<br />
Cả MongoDB driver và Phalcon đều là những extensions cho PHP, bạn cần kích hoạt chúng để có thể sử dụng:<br />
<br />
<pre class="prettyprint"><code class=" hljs bash"><span class="hljs-built_in">cd</span> /etc/php5/mods-available
<span class="hljs-built_in">sudo</span> touch mongo.ini
<span class="hljs-built_in">sudo</span> touch phalcon.ini
<span class="hljs-built_in">echo</span> <span class="hljs-string">"extension=mongo.so"</span> | <span class="hljs-built_in">sudo</span> tee <span class="hljs-operator">-a</span> mongo.ini
<span class="hljs-built_in">echo</span> <span class="hljs-string">"extension=phalcon.so"</span> | <span class="hljs-built_in">sudo</span> tee <span class="hljs-operator">-a</span> phalcon.ini
<span class="hljs-built_in">sudo</span> php5enmod mongo
<span class="hljs-built_in">sudo</span> php5enmod phalcon
<span class="hljs-built_in">sudo</span> service nginx restart
<span class="hljs-built_in">sudo</span> service php5-fpm restart</code></pre>
<br />
Bạn cũng có thể cài đặt PhantomJS bằng cách download thẳng vào /usr/local/share và tạo ra các symlink cần thiết. Nhưng nó sẽ chỉ chạy sau khi Node.js đã được install hoàn chỉnh.<br />
<br />
<pre class="prettyprint"><code class=" hljs lasso">cd /usr/<span class="hljs-built_in">local</span>/share
sudo wget https:<span class="hljs-comment">//bitbucket.org/ariya/phantomjs/downloads/phantomjs-1.9.7-linux-x86_64.tar.bz2</span>
sudo tar xjf phantomjs<span class="hljs-subst">-</span><span class="hljs-number">1.9</span><span class="hljs-number">.7</span><span class="hljs-attribute">-linux</span><span class="hljs-attribute">-x86_64</span><span class="hljs-built_in">.</span>tar<span class="hljs-built_in">.</span>bz2
sudo ln <span class="hljs-attribute">-s</span> /usr/<span class="hljs-built_in">local</span>/share/phantomjs<span class="hljs-subst">-</span><span class="hljs-number">1.9</span><span class="hljs-number">.7</span><span class="hljs-attribute">-linux</span><span class="hljs-attribute">-x86_64</span>/bin/phantomjs /usr/<span class="hljs-built_in">local</span>/share/phantomjs
sudo ln <span class="hljs-attribute">-s</span> /usr/<span class="hljs-built_in">local</span>/share/phantomjs<span class="hljs-subst">-</span><span class="hljs-number">1.9</span><span class="hljs-number">.7</span><span class="hljs-attribute">-linux</span><span class="hljs-attribute">-x86_64</span>/bin/phantomjs /usr/<span class="hljs-built_in">local</span>/bin/phantomjs
sudo ln <span class="hljs-attribute">-s</span> /usr/<span class="hljs-built_in">local</span>/share/phantomjs<span class="hljs-subst">-</span><span class="hljs-number">1.9</span><span class="hljs-number">.7</span><span class="hljs-attribute">-linux</span><span class="hljs-attribute">-x86_64</span>/bin/phantomjs /usr/bin/phantomjs</code></pre>
<br />
Bạn cũng nên có 1 số thiết lập cho environment:<br />
<br />
<pre class="prettyprint"><code class=" hljs bash"><span class="hljs-built_in">echo</span> <span class="hljs-keyword">export</span> NODE_ENV=development >> ~/.bash_profile
<span class="hljs-built_in">echo</span> <span class="hljs-keyword">export</span> LC_ALL=en_US.UTF-<span class="hljs-number">8</span> >> ~/.bash_profile
<span class="hljs-built_in">echo</span> <span class="hljs-keyword">export</span> LANG=en_US.UTF-<span class="hljs-number">8</span> >> ~/.bash_profile
<span class="hljs-built_in">echo</span> <span class="hljs-keyword">export</span> LANGUAGE=en_US.UTF-<span class="hljs-number">8</span> >> ~/.bash_profile
<span class="hljs-built_in">source</span> ~/.bash_profile</code></pre>
<br />
Cuối cùng, để kiểm tra các tools đã ổn chưa, bạn có thể dùng các lệnh xem thử version của chúng:<br />
<br />
<pre class="prettyprint"><code class=" hljs lasso">nginx <span class="hljs-attribute">-v</span>
node <span class="hljs-attribute">-v</span>
php <span class="hljs-attribute">-v</span>
npm <span class="hljs-attribute">-v</span>
phantomjs <span class="hljs-attribute">-v</span>
mongo <span class="hljs-subst">--</span>version</code></pre>
Dong Nguyenhttp://www.blogger.com/profile/08315900287977325135noreply@blogger.comtag:blogger.com,1999:blog-4828609964961329038.post-70774706210403549222013-02-18T00:02:00.000+07:002013-02-20T02:42:57.968+07:00Về cố đô<div style="text-align: left;">
Đầu xuân may mắn làm được một chuyến hành hương về cố đô. Tản bộ bên bờ sông Hương, lạc vào chợ Đông Ba khi chiều xuống, lang thang trong Thành nội ngắm cỏ cây hoa lá... để thấy thêm yêu xứ xở trầm tư mơ mộng này.
Đây là hơn 300 hình ảnh chụp được trong chuyến đi từ ngày 3 đến ngày 6 năm Quý Tỵ, bạn cần flash để xem :)</div>
<div style="text-align: center;">
<embed flashvars="host=picasaweb.google.com&captions=1&hl=en_US&feat=flashalbum&RGB=0x000000&feed=https%3A%2F%2Fpicasaweb.google.com%2Fdata%2Ffeed%2Fapi%2Fuser%2F113270353763049199537%2Falbumid%2F5845946381539967297%3Falt%3Drss%26kind%3Dphoto%26hl%3Den_US" height="400" pluginspage="http://www.macromedia.com/go/getflashplayer" src="https://picasaweb.google.com/s/c/bin/slideshow.swf" type="application/x-shockwave-flash" width="600"></embed></div>
<div style="text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-sn3qQpQPZd8/USD5TTnmMZI/AAAAAAAABrc/QoVggr73tug/s1600/2013-02-13+15.24.45.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://2.bp.blogspot.com/-sn3qQpQPZd8/USD5TTnmMZI/AAAAAAAABrc/QoVggr73tug/s1600/2013-02-13+15.24.45.jpg" height="240" width="320" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-Z3_I3Xrd-V0/USD5hHti1LI/AAAAAAAABtE/bgBw6p8BkCU/s1600/2013-02-13+15.41.56.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://1.bp.blogspot.com/-Z3_I3Xrd-V0/USD5hHti1LI/AAAAAAAABtE/bgBw6p8BkCU/s1600/2013-02-13+15.41.56.jpg" height="240" width="320" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-iJNSZQi2zeI/USD5whVhUJI/AAAAAAAABvQ/1weM-0-jniI/s1600/2013-02-13+17.12.23.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://4.bp.blogspot.com/-iJNSZQi2zeI/USD5whVhUJI/AAAAAAAABvQ/1weM-0-jniI/s1600/2013-02-13+17.12.23.jpg" height="240" width="320" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-D6IvYBsIJUk/USD6q6JcUaI/AAAAAAAAB3M/jXgTqhmy-UM/s1600/2013-02-14+13.34.09.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://4.bp.blogspot.com/-D6IvYBsIJUk/USD6q6JcUaI/AAAAAAAAB3M/jXgTqhmy-UM/s1600/2013-02-14+13.34.09.jpg" height="240" width="320" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-4UvLgqoZwEU/USD7LKRkj6I/AAAAAAAAB7c/qv7NdgSUv2A/s1600/2013-02-14+14.03.36.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://1.bp.blogspot.com/-4UvLgqoZwEU/USD7LKRkj6I/AAAAAAAAB7c/qv7NdgSUv2A/s1600/2013-02-14+14.03.36.jpg" height="240" width="320" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-nfjWfO08UnE/USD83Gt9oAI/AAAAAAAACMc/8tFq4WfmlUY/s1600/2013-02-14+17.19.09.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://1.bp.blogspot.com/-nfjWfO08UnE/USD83Gt9oAI/AAAAAAAACMc/8tFq4WfmlUY/s1600/2013-02-14+17.19.09.jpg" height="240" width="320" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-A3MhjYzlifU/USD9XNFIUPI/AAAAAAAACRs/qWjRr45zsrE/s1600/2013-02-15+10.10.17.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://3.bp.blogspot.com/-A3MhjYzlifU/USD9XNFIUPI/AAAAAAAACRs/qWjRr45zsrE/s1600/2013-02-15+10.10.17.jpg" height="240" width="320" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-ZHyFHzKrpd8/USD9hvJDTjI/AAAAAAAACTE/HEIldAnbLd8/s1600/2013-02-15+13.10.34.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://2.bp.blogspot.com/-ZHyFHzKrpd8/USD9hvJDTjI/AAAAAAAACTE/HEIldAnbLd8/s1600/2013-02-15+13.10.34.jpg" height="240" width="320" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-uIEBF4IhepQ/USD-UqIql4I/AAAAAAAACaA/b7QAgjQB5Qs/s1600/2013-02-15+14.01.07.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://4.bp.blogspot.com/-uIEBF4IhepQ/USD-UqIql4I/AAAAAAAACaA/b7QAgjQB5Qs/s1600/2013-02-15+14.01.07.jpg" height="240" width="320" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-8FAznFr5MqU/USD-hpoHdtI/AAAAAAAACcA/wI6tDTyb994/s1600/2013-02-15+19.17.54.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://4.bp.blogspot.com/-8FAznFr5MqU/USD-hpoHdtI/AAAAAAAACcA/wI6tDTyb994/s1600/2013-02-15+19.17.54.jpg" height="240" width="320" /></a></div>
<div style="text-align: center;">
<br /></div>
Dong Nguyenhttp://www.blogger.com/profile/08315900287977325135noreply@blogger.comtag:blogger.com,1999:blog-4828609964961329038.post-58920430907693911452013-02-11T18:35:00.002+07:002013-09-08T13:26:06.815+07:00Ăn uống<br />
Dân ta có vẻ khoái công thức "ăn"+event! Ăn tết, ăn rằm, ăn mùng 3 tháng 3... ăn cưới, ăn hỏi, ăn đầy tháng, ăn giỗ... Trong các ngữ động từ này, tên sự kiện dùng như bổ ngữ cho động từ "ăn", giải thích lý do vì sao mà phát sinh cái sự "ăn". Tôi gọi đó là "ăn nhân dịp".<br />
<br />
<br />
Thời cơ cực, các chủ nhân của đất nước quanh năm quần quật làm lụng mà đói hoài vẫn đói, thế mới sinh ra tệ "ăn chực", tức là tới nhà khác vào lúc gần bữa cơm, rồi nhân tiện nhảy vào đánh chén. Tệ này bị chế giễu nhiều trong các chuyện cười dân gian còn lưu truyền lại.<br />
<br />
<br />
"Ăn nhân dịp" tôi cho là một hình thức "ăn chực" được chuẩn hóa bằng lễ nghi. Nhớ xưa, mỗi khi tết đến, các gia đình ở quê đều chuẩn bị sẵn vài mâm cơm, để trên ban thờ, khách tới thì làm thủ tục chúc tụng nhau vài câu xong là lôi mâm xuống, chủ khách ra vẻ tri kỷ tương phùng như bác Bị bác Tháo năm xưa, vừa nhai ngấu nghiến vừa nói chuyện các anh hùng làng trên xóm dưới. Khách ra về rồi, vợ chồng hì hục điểm lại các món, mới ngậm ngùi : Lão ấy xơi mất mẹ nó 5 miếng chả lụa vị chi là 62,5% đĩa, chiều sang nhà lão phải cố ăn lại cho bõ tức!<br />
<br />
<br />
Ngày nay, nhờ sự lãnh đạo sáng suốt của Đảng và nhà nước, dân ta ai cũng đã có thừa cơm ăn áo mặc. Mấy chuyện đo lọ nước mắm, đếm củ dưa hành chả còn ai làm nữa. Cơ mà vật cực tất phản, trong khi phụ nữ bắt đầu mặc ít vải đi vì có quá nhiều vải, đàn ông cũng ăn ít hơn vì có quá nhiều thứ để ăn, họ buộc phải chuyển sang uống để đảm bảo cân bằng sinh hóa. Cccc gì cũng uống. "Ăn nhân dịp" trở thành "uống nhân dịp". Cái ăn chỉ còn ý nghĩa tô điểm cho cái uống, và hiện diện trong "dịp" dưới hình thức "mồi". Người đến chúc tết nhà khác vẫn mang theo những câu chúc tụng đã thành công thức để đối lấy cái tương tự nơi chủ nhà. Nhưng không còn thấy cỗ bàn la liệt nữa. Tất cả linh đình thịnh soạn có thể được cô đọng trong một khoanh giò. Mấu chốt nằm ở thức uống. Khá giả thì sâm banh, vang ngoại, ít tiền thì vốt ka, cuốc lủi, dân dã thì bia lon... Bật nắp, blablabla dzô dzô, và uống. Mùi bia rượu vun đắp cho niềm tin tưởng về tình bằng hữu và nghĩa huynh đệ. Hơi men khơi dậy ảo giác về sự thấu hiểu và cảm thông. Những chiếc cối xay gió chỉ là cối xay gió trong mắt độc giả của cụ Xéc van téc, còn với chàng hiệp sĩ xứ Mancha, đấy mãi mãi là bọn khổng lồ thực thụ. Khi những thiện cảm cá nhân phải bám víu vào một vài mô thức để chứng tỏ sự tồn tại của nó thì đó chỉ là những thứ thiện cảm được giả lập.<br />
<br />
<br />
Dù có thế nào, từ "ăn nhân dịp" chuyển sang "uống nhân dịp" vẫn đánh dấu một bước tiến vĩ đại trên con đường quá độ đi lên CNXH của nước ta. Nó cho thế giới thấy rằng dân ta không còn đói nữa, mà chỉ còn khát thôi. Khát một cái gì đó không phải nước, cô ca cô la hay bia rượu. Một thứ gì đó không ồn ào huyên náo sáo rỗng.<br />
<br />
<br />
Có lẽ là sự thanh lặng của chân tình.Dong Nguyenhttp://www.blogger.com/profile/08315900287977325135noreply@blogger.comtag:blogger.com,1999:blog-4828609964961329038.post-1595146687670518502013-01-06T15:36:00.000+07:002013-02-17T02:18:31.505+07:00Đối tượng trùmTrong lập trình hướng đối tượng, một đối tượng trùm - <a href="http://lostechies.com/chrismissal/2009/05/28/anti-patterns-and-worst-practices-monster-objects/" target="_blank">Monster object</a> hoặc <a href="http://en.wikipedia.org/wiki/God_object?oldid=361403957">God object</a> - là đối tượng biết quá nhiều thứ hoặc phải làm quá nhiều việc.<br />
<br />
Về cơ bản, cấu trúc hóa source code của chương trình là dựa trên ý tưởng chia để trị, phân tách vấn đề lớn thành nhiều vấn đề nhỏ, giải quyết từng vấn đề nhỏ. Giải quyết xong hết các vấn đề nhỏ thì vấn đề lớn đồng thời cũng đã được giải quyết. Nguyên tắc ấy cũng có nghĩa là chỉ nên có duy nhất một thứ mà đối tượng cần phải biết đầy đủ, đó là chính nó. Cũng tương tự, chỉ có duy nhất một tập hợp các vấn đề mà đối tượng phải giải quyết, đó chính là những vấn đề của nó.<br />
<br />
<br />
<div style="text-align: center;">
<img border="0" src="http://2.bp.blogspot.com/-F1r8yzl8jL4/UOk1h59SvrI/AAAAAAAABlo/PNStrNLK96c/s1600/god_object.jpg" /></div>
<div style="text-align: center;">
<br /></div>
<br />
Viết code sử dụng đối tượng trùm thì không giống như vậy. Thay vào đó, mọi hoạt động trong chương trình đều xoay quanh một đối tượng biết tuốt, nắm hầu như tất cả thông tin về chương trình, và cung cấp hầu như mọi phương thức thao tác trên các dữ liệu đó. Vì đối tượng này giữ nhiều thông tin và quản lý nhiều phương thức như thế nên vai trò của nó trở nên quan trọng ngang với Chúa trời. Các đối tượng trong chương trình thay vì giao tiếp thẳng với nhau, chúng lấy thông tin của chúng qua đối tượng trùm và tương tác với nhau nhờ đối tượng trùm. Vì đối tượng trùm bị tham chiếu bởi quá nhiều phần code khác nhau, việc bảo trì sẽ trở nên khó khăn hơn so với các chương trình được thiết kế cân đối về chức năng và nhiệm vụ. Viết chương trình xoay quanh một đối tượng trùm thường được xếp vào dạng <a href="http://en.wikipedia.org/wiki/Anti-pattern" target="_blank">anti-pattern</a>.<br />
<br />
Tuy nhiên, phê phán đối tượng trùm không có nghĩa là từ bỏ global objects. Trên thực tế, mọi chương trình đều cần đến những phương thức, thuộc tính dùng chung, có thể tham chiếu được từ tất cả các class, modules... bên trong, thậm chí cả những extentions nhúng thêm vào. Nó giúp tập trung hóa một phần chức năng lõi của chương trình, đảm bảo tính nhất quán về logic xử lý. Vấn đề là phải giữ được sự hài hòa trong cấu trúc chương trình. Nghĩa là việc phân phối chức năng, nhiệm vụ từng phần code phải được tính toán kỹ ngay từ khâu thiết kế hệ thống.<br />
<br />
Theo kinh nghiệm cá nhân, tôi luôn đặt vào chương trình một đối tượng nền và giao cho nó nắm giữ một vài thông tin cơ bản của ứng dụng, cài đặt vào nó một private storage và các phương thức set/get/remove để thao tác trên storage đó. Thỉnh thoảng tôi cũng thêm vào cho nó một tập phương thức tĩnh, có thể gỡ ra bất cứ lúc nào. Nó không phải God mà chỉ đơn giản đóng vai trò của một Assistant trợ giúp cho các đối tượng khác, giảm thiểu việc tạo ra những hiện thể kế thừa không cần thiết và làm cho chương trình có vẻ dễ dàng kiểm soát hơn. <br />
<br />
Dân chủ thì cũng phải có ai đó đứng ra chịu trách nhiệm về đại cục chứ :D<br />
<br />
<br />Dong Nguyenhttp://www.blogger.com/profile/08315900287977325135noreply@blogger.comtag:blogger.com,1999:blog-4828609964961329038.post-59912523923818608202012-12-30T23:22:00.002+07:002013-01-01T16:14:45.796+07:00Facebook : gợi ý status ngẫu nhiênSự đổi mới, liên tục đổi mới, gần như là đòi hỏi tất yếu đối với các ông trùm công nghệ, đặc biệt những thế lực hoạt động trong lĩnh vực mạng xã hội. Đôi khi, người dùng cuối không hề nhận ra các điều chỉnh nơi dịch vụ mà họ đang trải nghiệm, vì lẽ những thay đổi ấy có thể rất nhỏ nhặt, không đáng để ý đến. Nhưng xét về tính logic và tiện dụng, mọi điều chỉnh đều hướng đến sự hợp lý và làm cho người dùng cảm thấy thoải mái nhất.<br />
<br />
Tôi muốn nói đến một thay đổi rất nhỏ mà có thể không nhiều người nhận ra trên Facebook. Đó là câu gợi ý trong vùng nhập status. Bạn nhớ nó là gì chứ? <i>What's on your mind?</i> Vâng, vài ngày trước nó là "<i>What's on your mind?"</i>. Nhưng giờ đây, Facebook đã chuyển sang dùng một loạt mẫu câu gợi ý khác nhau và để chúng ngẫu nhiên xuất hiện cùng với tên (first name) của người sử dụng :<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-3c9WSd7Jldg/UOBe0cU5uhI/AAAAAAAABkc/bzfPSKMGIxY/s1600/fb5.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://1.bp.blogspot.com/-3c9WSd7Jldg/UOBe0cU5uhI/AAAAAAAABkc/bzfPSKMGIxY/s1600/fb5.png" /></a></div>
<br />
<i><br /></i>
<i>Bạn cảm thấy thế nào?</i> Không phải tôi hỏi bạn, mà là Facebook!<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-rO_CJPbChOE/UOBewhcm51I/AAAAAAAABkA/a794rjCNmPQ/s1600/fb1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://1.bp.blogspot.com/-rO_CJPbChOE/UOBewhcm51I/AAAAAAAABkA/a794rjCNmPQ/s1600/fb1.png" /></a></div>
<i><br class="Apple-interchange-newline" />Bạn tính làm thế nào?</i> Nó bắt đầu đóng vai một người bạn đầy quan tâm. Nó gọi tên của bạn chứ không phải gọi họ của bạn một cách khách sáo!<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-xzWUvWTEpMA/UOBezbjyu6I/AAAAAAAABkY/W_nySOy0uiQ/s1600/fb4.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://1.bp.blogspot.com/-xzWUvWTEpMA/UOBezbjyu6I/AAAAAAAABkY/W_nySOy0uiQ/s1600/fb4.png" /></a></div>
<br />
<i>Có chuyện gì xảy ra thế?</i> Bây giờ thì nó trở nên tò mò!<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-RoqwAipcVnA/UOBeyeYd_UI/AAAAAAAABkQ/MpVHRcj5IP0/s1600/fb3.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://2.bp.blogspot.com/-RoqwAipcVnA/UOBeyeYd_UI/AAAAAAAABkQ/MpVHRcj5IP0/s1600/fb3.png" /></a></div>
<br />
Sự thay đổi này không hề vô nghĩa. Tôi tin rằng đó là kết quả của một quá trình phân tích tâm lý người dùng một cách tỉ mỉ. Và mục đích cuối cùng là khuyến khích người dùng gõ vào status một cái gì đó, bất kể điều gì, rồi nhấn Post.<br />
<br />
Tất cả những hệ thống dịch vụ hoạt động dựa trên User Generated Content đều cần người dùng của chúng tích cực đóng góp nội dung. Chúng sinh tồn nhờ vào người dùng cuối. Mỗi thông điệp của bạn dù ngắn ngủi cũng sẽ kéo theo vô số những activities khác xung quanh : like, comment, share... hay đơn giản chỉ là view.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-qJz6kNYBMq0/UOBexZCPZVI/AAAAAAAABkE/RvJW9Aeo5Bs/s1600/fb2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://4.bp.blogspot.com/-qJz6kNYBMq0/UOBexZCPZVI/AAAAAAAABkE/RvJW9Aeo5Bs/s1600/fb2.png" /></a></div>
<br />
Mỗi dòng chữ của bạn post lên hệ thống cũng giống như một chiếc xe gia nhập vào dòng xe cộ lưu thông trên đường, làm những chiếc xe xung quanh phải thay đổi tốc độ, hoặc rẽ tránh, hoặc nhích sang phía bên kia một chút, nghĩa là cả quá trình giao thông đã bị biến đổi, xáo trộn. Và đó là hoạt động, là sống. Chỉ một câu status ngắn của bạn cũng tiếp thêm sức sống cho hệ thống mà bạn đang dùng.<br />
<br />
Ngày 19/11/2009, Biz Stone, một người trong nhóm sáng lập Twitter <a href="http://blog.twitter.com/2009/11/whats-happening.html" target="_blank">thông báo trên blog của công ty</a>, họ vừa đổi câu gợi ý status trở thành "What's happening?". Trước đó, Twitter dùng câu "What are you doing?". Chưa thấy báo cáo nào đo lường về hiệu quả đạt được sau sự thay đổi này, nhưng nhìn vào 2 câu ấy có thể thấy được câu sau mang tính khuyến khích mạnh hơn hẳn. Với "What are you doing?", nếu tôi chỉ đơn giản ngồi đọc các tweets thì có gì để động ngón tay? Nhưng câu "What's happening?" nhắc nhở tôi nói về bất cứ thứ gì diễn ra xung quanh, trên phim truyền hình, trong báo chí, hoặc một ý tưởng mới nảy sinh trong đầu. Nó khiến tôi cảm thấy có nhiều thứ cần phải tweet!<br />
<br />
Facebook cũng đã nhiều lần đổi gợi ý status, và có vẻ như không thể chọn ra câu nào tối ưu, họ đã khéo léo gom chúng lại và để sự ngẫu nhiên quyết định. Điều này cũng tạo ra cảm giác về sự thông minh, linh hoạt của ứng dụng. Nó không còn lặp đi lặp lại cứng nhắc như một cái máy, khiến người dùng nhàm chán.<br />
<br />
Bạn có nhớ Google+ dùng câu gì không?<br />
<br />
<br />
<br />Dong Nguyenhttp://www.blogger.com/profile/08315900287977325135noreply@blogger.comtag:blogger.com,1999:blog-4828609964961329038.post-12502243189239122672012-06-11T23:39:00.000+07:002013-02-17T02:24:01.349+07:00Khi gà trống trở lạiChúng ta đã chờ đợi từ lâu cái khoảnh khắc được chứng kiến kết quả vụ mùa sau 2 năm dài mà Blanc cùng các học trò của anh dành trọn tâm huyết để tái thiết hình ảnh Les Bleus từ đống đổ nát do Domenech bỏ lại.<br />
<br />
<div style="text-align: center;">
<img border="0" src="http://2.bp.blogspot.com/-M9Ajj_hnoMY/ULde1Sw3w9I/AAAAAAAABYQ/ASXmzkLhi9Q/s1600/206027_256817244419391_82094255_n.jpg" /></div>
<br />
<br />
2 năm qua, dõi theo những bước tiến của đội tuyển, niềm tin mỗi lúc một dâng cao. Nhưng khi cái khoảnh khắc ra quân thực sự chỉ còn tính bằng phút, thì nỗi lo âu cũng thêm phần rõ nét.<br />
<br />
10/6, xem Ý và Tây Ban Nha thư hùng, mà không khỏi e ngại. Rõ ràng trong khi chúng ta đang mạnh lên từng ngày, thì những người bạn của chúng ta cũng đang từng ngày mạnh lên. Dù đêm nay chúng ta hạ được đối thủ phía bên kia biển Manche, nhưng những Italia, Espagne, Denmark... đó cũng chẳng hề yếu đuối. Các chàng trai của chúng ta liệu có duy trì được một cách bền bỉ sức mạnh, sự tự tin, và khát khao chiến thắng cho đến phút cuối cùng của chiến dịch chinh phục châu Âu đầy gian nan thử thách? Còn rất nhiều việc phải làm. Hy vọng rằng các chiến hữu năm xưa của Blanc : Zidane, Deschamps, Barthez... sẽ không để anh phải một mình xoay xở. Marvin, Arfa, Benzema, Giroud... những chiến binh trẻ hôm nay rất cần được thế hệ đi trước quan tâm, chỉ dẫn và không ngừng tiếp lửa.<br />
<br />
Chiến thuật "sóng vỗ bờ" ngày đó của Aimet Jacquet có thể sẽ được Blanc vận dụng theo cách riêng của anh. Nhưng khoan hãy nói gì...<br />
<br />
Vì diễn biến trên sân đã cho thấy 1 đội tuyển Pháp khác hẳn so với những trận giao hữu gần đây. Tấn công bế tắc, phòng ngự đầy sơ hở. Trận này Blanc hơi có vẻ thiếu linh hoạt trong việc thay đổi nhân sự và điều chỉnh chiến thuật. Nếu anh tung Martin và Arfa vào sớm hơn thì có thể thế trận sẽ khác đi nhiều. Malouda chơi mờ nhạt, lẽ ra cần đưa Valbuena vào thay thế ở đầu hiệp 2. Debuchy hoạt động năng nổ, gợi nhớ đến Thuram ngày trước, còn Evra không hỗ trợ được nhiều cho tuyến trên, Koscielny có thể làm tốt hơn thế. Điều an ủi duy nhất là Lloris phải làm việc ít hơn thủ môn đội bạn. Chúng ta giữ bóng nhiều hơn, tạo ra nhiều cơ hội hơn, song chừng đó là chưa đủ. <br />
<br />
Nhìn chung đây là một trận đấu không thành công. Với lối chơi như thế, những chú gà trống vẫn còn chưa tìm lại được tiếng gáy của ngày vinh quang.<br />
<br />
Nhưng, một lần nữa, hãy kiên nhẫn.Dong Nguyenhttp://www.blogger.com/profile/08315900287977325135noreply@blogger.comtag:blogger.com,1999:blog-4828609964961329038.post-70752190958200403732012-03-24T21:30:00.000+07:002012-12-23T19:55:32.949+07:00Điều gì ta nghe?<br />
Một người vào Nam chơi, đi qua cầu Phú Long, thấy cả một vùng sông nước mênh mông cuộn chảy, bèo dạt thênh thang, trời chiều lộng gió, xanh um bóng dừa hai bên ven làng xóm... Anh ta về bảo sông ở trong Nam đẹp lắm.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-BnqUu_K-YIk/UNb_P1gpruI/AAAAAAAABe0/I5yNae9yQnQ/s1600/DSC05018.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://4.bp.blogspot.com/-BnqUu_K-YIk/UNb_P1gpruI/AAAAAAAABe0/I5yNae9yQnQ/s1600/DSC05018.jpg" height="240" width="320" /></a></div>
<br />
<br />
"Sông ở trong Nam" là khái niệm tổng quát. Khúc sông ở dưới cầu Phú Long chỉ là một phần bé nhỏ trong khái niệm đó. Nơi ngã ba sông anh ta thấy thực sự đẹp, nhưng còn bao nhiêu chỗ khác nước dơ, sông đục, quanh năm bốc mùi. Nghe ai khen hay chê điều gì thì chỉ nên tin vào đúng cái phần mà người ta thực sự nắm bắt được thôi. Đem những xét đoán cho một trường hợp cá biệt nâng cấp lên thành quan niệm về cái tổng quát, tất yếu sẽ làm nảy sinh những ý niệm lệch lạc đối với hiện thực.<br />
<br />
Trên chiều sâu ký ức, con người thường bị chi phối bởi các định kiến. Ấn tượng ban đầu gieo vào lòng người ta một lần, rồi cứ đọng mãi theo năm tháng. Khi ai đó từng ra Bắc bảo với bạn rằng món bánh gai ở đó ngon tuyệt, mà bạn chưa nếm thử lần nào, thì hãy tin những cái bánh gai anh ta đã từng ăn thực sự ngon, nhưng hãy nghi ngờ mệnh đề "bánh gai ngoài Bắc ngon tuyệt". Có thể đó là vì anh ta may mắn được ăn bánh gai do một bà lão mát tay ở thôn Ninh Giang làm ra. Còn những chiếc bánh gai mà sau này bạn sẽ ăn chưa chắc đã vừa miệng. Đừng kỳ vọng nhiều vào nơi kinh nghiệm cá nhân của người khác. Kinh nghiệm gắn liền với định kiến, sự gạn lọc qua một màng lưới chủ quan đan kết bởi hai chiều thích và không thích. Người ta không chủ tâm lừa dối, nhưng người ta chỉ có thể phản ánh đến bạn một phần hiện thực còn sót lại.<br />
<br />
Tôi rất thích lắng nghe và suy nghĩ về tất cả những điều người khác nói. Nhưng tôi chẳng bao giờ tin tất cả những điều người khác nói.<br />
<div>
<br /></div>
Dong Nguyenhttp://www.blogger.com/profile/08315900287977325135noreply@blogger.comDa Nang, Thanh Khê, Da Nang, Vietnam16.051571 108.21489715.990532499999999 108.135933 16.112609499999998 108.29386099999999tag:blogger.com,1999:blog-4828609964961329038.post-62231176916785776642011-09-04T11:34:00.006+07:002012-12-23T19:38:38.553+07:00Amour défendu - Mireille MathieuCa khúc trữ tình này được dùng làm bài hát chính trong bộ phim tình cảm của Pháp mang tựa đề là "Jeux interdits". Không rõ tác giả ca khúc là ai, và có vẻ như giai điệu bài hát được viết dựa trên những nét nhạc của nhiều đoạn romance xuất hiện từ cuối thế kỷ XIX. Vì thế nó cũng được biết đến với những cách gọi khác : Romance Anónimo, Romance d'amour, Romance de Amure, Romance de España, Estudio en Mi de Rubira... <br />
<br />
Bài hát này có không dưới 30 phiên bản lời Pháp, nhưng phiên bản do nữ ca sĩ tài danh một thời <a href="http://fr.wikipedia.org/wiki/Mireille_Mathieu">Mireille Mathieu</a> dường như gần nhất với chủ đề bộ phim. Hai từ "interdit" và "defendu" đều có nghĩa là <i>bị ngăn cấm</i>.<br />
<br />
Ca khúc viết về tình yêu của một cô gái dành cho một người đàn ông đã có vợ. Khổ nhạc đầu tiên diễn tả điều đó một cách dìu dặt lãng mạn : <i>Gió tháng mười vờn trên mặt sông, nếp áo em chạm lên nhành thạch thảo. Tiết trời dịu dàng biết bao! Em muốn cầm tay anh biết bao! mà chiếc nhẫn nơi tay anh bắt em dừng lại...</i><br />
<i><br /></i>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-ZWx3e2ZHmr4/UNb7Rg-N4uI/AAAAAAAABds/ctXHHEl5gPs/s1600/Mireille_Mathieu.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://3.bp.blogspot.com/-ZWx3e2ZHmr4/UNb7Rg-N4uI/AAAAAAAABds/ctXHHEl5gPs/s1600/Mireille_Mathieu.jpg" /></a></div>
<i><br /></i>
<i><br />
</i><br />
Ngần ngại, sợ làm tổn thương người thứ ba, nhưng sau rốt cô gái vẫn không ngăn được trái tim mình, vẫn thốt lời yêu. Và cả bài hát là sự hòa trộn những phức cảm của ái tình mộng mơ với niệm dằn vặt tội lỗi đó.<br />
<div>
<br /></div>
<div>
Mời các bạn thưởng thức giọng ca Mireille Mathieu qua tình khúc "Amour défendu", một trong những tình khúc hay nhất mọi thời đại :</div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<iframe allowfullscreen='allowfullscreen' webkitallowfullscreen='webkitallowfullscreen' mozallowfullscreen='mozallowfullscreen' width='320' height='266' src='https://www.youtube.com/embed/Vcg3Rp8mPMw?feature=player_embedded' frameborder='0'></iframe></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<b>Ca từ của bài hát :</b></div>
<div>
<br />
<span class="Apple-style-span" style="font-family: arial; font-size: x-small;"></span><br />
<div>
<blockquote>
<i><b>Amour défendu </b></i> </blockquote>
<blockquote>
<i>Le vent d'octobre<br />
Froissait la rivière<br />
Les plis de ma robe<br />
Frôlaient la bruyère<br />
L'air était si tendre<br />
Que j'ai voulu prendre<br />
Ta main qu'une bague<br />
M'avait défendue </i> </blockquote>
<blockquote>
<i>La seule faute<br />
Restera la mienne<br />
J'ai oublié l'autre<br />
Et j'ai dit "Je t'aime"<br />
Les fleurs de la lande<br />
Aux couleurs de l'ambre<br />
Ont tout recouvert<br />
Et mon cœur s'est perdu </i> </blockquote>
<blockquote>
<i>{Refrain:} </i> </blockquote>
<blockquote>
<i>Amour de rêve<br />
Amour de l'automne<br />
Quand le jour se lève<br />
C'est l'hiver qui sonne<br />
On a pris le monde<br />
Pour quelques secondes<br />
Mais on ne vit pas<br />
D'un amour défendu </i> </blockquote>
<blockquote>
<i>Il y avait l'autre<br />
Il y avait ses larmes<br />
J'ai repris ma faute<br />
J'ai jeté les armes<br />
Les fleurs de la lande<br />
Aux couleurs de l'ambre<br />
Où l'on s'est aimés<br />
Ne me reverront plus </i> </blockquote>
<blockquote>
<i>{au Refrain} </i> </blockquote>
<blockquote>
<i>On a pris le monde<br />
Pour quelques secondes </i> </blockquote>
<blockquote>
<i>{x2:} </i> </blockquote>
<blockquote>
<i>Mais on ne vit pas<br />
D'un amour défendu </i></blockquote>
</div>
<div>
<br />
Và với những ai thích nhạc không lời thì đây là giai điệu bài hát được thể hiện bởi tiếng đàn guitar của danh cầm <a href="http://en.wikipedia.org/wiki/Francis_Goya">Francis Goya</a> :<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<iframe allowfullscreen='allowfullscreen' webkitallowfullscreen='webkitallowfullscreen' mozallowfullscreen='mozallowfullscreen' width='320' height='266' src='https://www.youtube.com/embed/sD1lo4MLzWQ?feature=player_embedded' frameborder='0'></iframe></div>
<br />
<br /></div>
</div>
Dong Nguyenhttp://www.blogger.com/profile/08315900287977325135noreply@blogger.comtag:blogger.com,1999:blog-4828609964961329038.post-34139269671856645262011-08-31T16:47:00.000+07:002011-09-03T06:03:22.595+07:00Ảnh chụp ngẫu hứng<div style="text-align: center;"><span class="Apple-style-span" style="color: #741b47;"><i><br />
</i></span></div><div style="text-align: center;"><span class="Apple-style-span" style="color: #741b47;"><i><br />
</i></span></div><div style="text-align: center;"><span class="Apple-style-span" style="color: #741b47;"><i><a href="http://1.bp.blogspot.com/-FdVUNQEPpC4/TjugEPYGePI/AAAAAAAAAhk/YFkTpk1Rl6w/s1600/050811-1307.jpg"><img border="0" height="400" src="http://1.bp.blogspot.com/-FdVUNQEPpC4/TjugEPYGePI/AAAAAAAAAhk/YFkTpk1Rl6w/s400/050811-1307.jpg" width="300" /></a></i></span></div><div style="text-align: center;"><span class="Apple-style-span" style="color: #741b47;"><i>The transition</i></span></div><div style="text-align: center;"><span class="Apple-style-span" style="color: #741b47;"><i><br />
</i></span></div><div style="text-align: center;"><span class="Apple-style-span" style="color: #741b47;"><i><br />
</i></span></div><div style="text-align: center;"><span class="Apple-style-span" style="color: #741b47;"><i><a href="http://3.bp.blogspot.com/-OuLzy4hDDzc/TkCFUWgA9EI/AAAAAAAAAlI/C5SBs6Y_o1c/s1600/080811-1803.jpg"><img border="0" height="300" src="http://3.bp.blogspot.com/-OuLzy4hDDzc/TkCFUWgA9EI/AAAAAAAAAlI/C5SBs6Y_o1c/s400/080811-1803.jpg" width="400" /></a></i></span></div><div style="text-align: center;"><span class="Apple-style-span" style="color: #741b47;"><i>Poseidon's bow</i></span></div><div style="text-align: center;"><span class="Apple-style-span" style="color: #741b47;"><i><br />
</i></span></div><div style="text-align: center;"><span class="Apple-style-span" style="color: #741b47;"><i><br />
</i></span></div><div style="text-align: center;"><a href="http://4.bp.blogspot.com/-wOUv4rsgq6o/TkCFdw-dA7I/AAAAAAAAAmA/Sg-eMLqaDvk/s1600/080811-1752.jpg"><span class="Apple-style-span" style="color: #741b47;"><i><img border="0" height="300" src="http://4.bp.blogspot.com/-wOUv4rsgq6o/TkCFdw-dA7I/AAAAAAAAAmA/Sg-eMLqaDvk/s400/080811-1752.jpg" width="400" /></i></span></a></div><div style="text-align: center;"><span class="Apple-style-span" style="color: #741b47;"><i>Sunset at the wharf </i></span></div><div style="text-align: center;"><span class="Apple-style-span" style="color: #741b47;"><i><br />
</i></span></div><div style="text-align: center;"><span class="Apple-style-span" style="color: #741b47;"><i><br />
</i></span></div><div style="text-align: center;"><a href="http://2.bp.blogspot.com/-eqyInUj3f54/TkiDRxJvZgI/AAAAAAAAAyE/MxM1MoqayDU/s1600/140811-1801.jpg"><span class="Apple-style-span" style="color: #741b47;"><i><img border="0" height="300" src="http://2.bp.blogspot.com/-eqyInUj3f54/TkiDRxJvZgI/AAAAAAAAAyE/MxM1MoqayDU/s400/140811-1801.jpg" width="400" /></i></span></a></div><div style="text-align: center;"><span class="Apple-style-span" style="color: #741b47;"><i>An afternoon on the beach</i></span></div><div style="text-align: center;"><span class="Apple-style-span" style="color: #741b47;"><i><br />
</i></span></div><div style="text-align: center;"><span class="Apple-style-span" style="color: #741b47;"><i><br />
</i></span></div><div style="text-align: center;"><a href="http://2.bp.blogspot.com/-eK0_aaYGORk/TkPA7hmIMaI/AAAAAAAAAtM/macusMLyXio/s1600/110811-1752.jpg"><span class="Apple-style-span" style="color: #741b47;"><i><img border="0" height="300" src="http://2.bp.blogspot.com/-eK0_aaYGORk/TkPA7hmIMaI/AAAAAAAAAtM/macusMLyXio/s400/110811-1752.jpg" width="400" /></i></span></a></div><div style="text-align: center;"><span class="Apple-style-span" style="color: #741b47;"><i>Late summer storm</i></span></div><div style="text-align: center;"><br />
</div>Dong Nguyenhttp://www.blogger.com/profile/08315900287977325135noreply@blogger.comtag:blogger.com,1999:blog-4828609964961329038.post-81983557345425897492011-08-22T09:30:00.007+07:002013-02-17T02:27:21.248+07:00Hòa điệu ngày nắng<div style="text-align: left;">
Chiều chủ nhật, lang thang một mình ra bãi dã ngoại ven biển ngắm cảnh thấy cũng thú vị đáo để :)<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-GLBaTR8vO-c/TlDojKzr_GI/AAAAAAAAA2Q/RwAN9DGUYHQ/s1600/210811-1433.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="240" src="http://2.bp.blogspot.com/-GLBaTR8vO-c/TlDojKzr_GI/AAAAAAAAA2Q/RwAN9DGUYHQ/s320/210811-1433.jpg" width="320" /></a></div>
<br />
<br /></div>
<div style="text-align: center;">
<embed flashvars="host=picasaweb.google.com&captions=1&hl=en_US&feat=flashalbum&RGB=0x000000&feed=https%3A%2F%2Fpicasaweb.google.com%2Fdata%2Ffeed%2Fapi%2Fuser%2F113270353763049199537%2Falbumid%2F5643265657813204785%3Falt%3Drss%26kind%3Dphoto%26hl%3Den_US" height="400" pluginspage="http://www.macromedia.com/go/getflashplayer" src="https://picasaweb.google.com/s/c/bin/slideshow.swf" type="application/x-shockwave-flash" width="520" wmode="transparent"></embed></div>
<br />Dong Nguyenhttp://www.blogger.com/profile/08315900287977325135noreply@blogger.comtag:blogger.com,1999:blog-4828609964961329038.post-29556880631485591912011-08-19T18:24:00.010+07:002012-12-23T14:11:53.847+07:00Fabien Barthez - người hùng một thủaTối qua đến sân Tuyên Sơn đá bóng với anh em trong cty <a href="http://toancauxanh.vn/">Green Global</a> nơi mình sẽ làm việc kể từ thứ Hai tuần sau.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="http://4.bp.blogspot.com/-neyafMZq9t8/Tk5K6QYMNaI/AAAAAAAAA0w/hhtvSuB7sgs/s1600/180811-1920.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="240" src="http://4.bp.blogspot.com/-neyafMZq9t8/Tk5K6QYMNaI/AAAAAAAAA0w/hhtvSuB7sgs/s320/180811-1920.jpg" width="320" /></a></div><br />
Kỷ niệm khó quên khi goalkeeper chưa biết mặt hết mọi người, vừa vào một chút đã chuyền bóng cho đối phương, biếu không 1 bàn thắng!<br />
<br />
Thần tượng bóng đá của mình vốn là bác Fabien Barthez. Bao nhiêu năm rồi mới đi bắt bóng trở lại, để lọt lưới mấy bàn không đáng, nhưng cũng cứu thua được mấy bàn tưởng chết chắc. Vui là chính nên cũng không ai phàn nàn. Có lão T.A.Tuấn trêu phải trang bị găng chân cho mình vì mình toàn bắt bằng chân :))<br />
<br />
Lại nhớ bác Barthez, hiện giờ thì Hugo Lloris là thủ môn số 1 của Pháp. Tài năng của anh không ai có thể phủ nhận. Khi anh đứng trước khung thành đội tuyển quốc gia, mình cũng như nhiều người hâm mộ Les bleus hoàn toàn yên tâm. Nhưng có vẻ như anh thiếu một chút chất lãng tử theo kiểu Fabien Barthez, cái lối biểu diễn mà những người tỏ ra nghiêm túc xem là ngớ ngẩn, song chúng mang lại kịch tính và thi vị cho những trận cầu bị nghiêm trọng hóa quá mức cần thiết :)<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><iframe allowfullscreen='allowfullscreen' webkitallowfullscreen='webkitallowfullscreen' mozallowfullscreen='mozallowfullscreen' width='320' height='266' src='https://www.youtube.com/embed/R3OLS-7eI3Q?feature=player_embedded' frameborder='0'></iframe></div><br />
<div class="separator" style="clear: both; text-align: center;"></div><div><br />
</div><div>Nhanh thật, France 1998, mình mới 19 tuổi, mà thấm thoắt đã hơn 1 thập kỷ trôi qua. Kể từ ngày đó, bóng đá Pháp đã trải qua biết bao thăng trầm. Cuộc đời mình cũng vậy. Song, mỗi khi xem bóng đá, nhìn những người thủ thành, mình đều nhớ đến bác Fabien, người hùng một thủa.</div>Dong Nguyenhttp://www.blogger.com/profile/08315900287977325135noreply@blogger.comtag:blogger.com,1999:blog-4828609964961329038.post-11448999895238887442011-08-11T07:10:00.000+07:002016-03-19T23:49:52.573+07:00Heello - Bản sao của Twitter?<div class="separator" style="clear: both; text-align: justify;">
<span class="Apple-style-span" style="background-color: white; font-family: "arial" , sans-serif; font-size: 13px; line-height: 18px;">Twitpic của nhà sáng lập Noah Everett đã công bố Heello. Đây là một mạng xã hội giống như bản sao của Twitter về cơ bản, nhưng thay vì tweeting, Twitpic dùng thuật ngữ pings. Tương tự, echo thay cho retweeting, listeners thay cho followers và listening thay cho following.</span></div>
<div class="separator" style="clear: both; text-align: justify;">
<span class="Apple-style-span" style="background-color: white; font-family: "arial" , sans-serif; font-size: 13px; line-height: 18px;"><br /></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-_zMYi6N7sWI/UNb7mhXAS4I/AAAAAAAABd0/40q8PJ6Ygcg/s1600/h.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="239" src="https://2.bp.blogspot.com/-_zMYi6N7sWI/UNb7mhXAS4I/AAAAAAAABd0/40q8PJ6Ygcg/s1600/h.png" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: justify;">
<span class="Apple-style-span" style="background-color: white; font-family: "arial" , sans-serif; font-size: 13px; line-height: 18px;"><br /></span></div>
<div class="separator" style="clear: both; text-align: justify;">
<span class="Apple-style-span" style="background-color: white; font-family: "arial" , sans-serif; font-size: 13px; line-height: 18px;"><br />
</span></div>
<div class="separator" style="clear: both; text-align: justify;">
<span class="Apple-style-span" style="background-color: white; font-family: "arial" , sans-serif; font-size: 13px; line-height: 18px;">Thuật ngữ dùng trong Heello khiến tôi nghĩ tác giả của nó chắc là một chuyên gia về quản trị mạng :)</span></div>
<div style="text-align: justify;">
<span class="Apple-style-span" style="font-family: "arial" , sans-serif; font-size: 13px; line-height: 18px;"><br />
</span></div>
<span class="Apple-style-span" style="background-color: white; font-family: "arial" , sans-serif; font-size: 13px; line-height: 18px;">Bạn có thể post pings bao gồm hình ảnh lên Twitpic và những listeners của bạn sẽ echo lại pings của bạn, như các twitters vẫn retweeting. </span><span class="Apple-style-span" style="background-color: white; font-family: "arial" , sans-serif; font-size: 13px; line-height: 18px;">Điều thú vị là Heello cho phép liên thông tới các services khác như Facebook và Twitter. Chỉ cần dùng Heello, bạn có thể đồng thời theo dõi tình hình diễn ra trên Facebook/Twitter và phản hồi lại những bạn bè ở đó mà không cần truy cập. Tuy nhiên, điều này Yahoo! Mail cũng đã làm rồi.</span><br />
<span class="Apple-style-span" style="background-color: white; font-family: "arial" , sans-serif; font-size: 13px; line-height: 18px;"><br />
</span><br />
<span class="Apple-style-span" style="background-color: white; font-family: "arial" , sans-serif; font-size: 13px; line-height: 18px;">Các bạn có thể thử nghiệm Heello tại đây : <a class="ot-anchor" href="http://heello.com/" style="cursor: pointer; text-decoration: none;">http://heello.com</a></span>Dong Nguyenhttp://www.blogger.com/profile/08315900287977325135noreply@blogger.com