FASTFOOD: 2013 sẽ là năm cất cánh cho web

Vì sao?

Một số công nghệ web đã trưởng thành và sẽ được triển khai trên nhiều trang web, mang lại nhiều ấn tượng cho user, giảm công sức cho lập trình viên khi phát triển và phân phối ứng dụng

CSS filters, mang sức mạnh đồ hoạ 3D

Cho phép thực hiện nhiều hiệu ứng đồ hoạ phức tạp (làm mờ, đổ bóng, bóp mép, đổi hình dạng của đối tượng, thay đổi mật độ màu, …) bằng các khai báo đơn giản.

Cho phép thực hiện các thao tác đồ hoạ phức tạp như đổ bóng vertex (như dùng GLSL, được ứng dụng phổ biến nhiều năm nay trong các xử lý đồ hoạ 3D)

Xem ví dụ tại CSS Filter

Lợi ích lớn cho các game nền web, các ứng dụng cần những hiệu ứng gây shock về đồ hoạ, xử lý ảnh

 

Google Chrome Apps

Google ko đối đầu trực tiếp với Windows, Mac, Linux, mà họ tạo ra Chrome,  cố gắng làm cho Chrome có mặt tại nhiều nơi, nhiều thiết bị như TV, laptop, điện thoại

Với Chrome, Google mang lại cho các lập trình viên khả năng viết chương trình bằng JS HTML CSS (là đơn giản hơn nhiều so với việc viết bằng C# Java PHP), chạy chương trình trong Chrome.

  • Phát triển nhanh chóng, thuận tiện
  • Rất dễ phân phối (vì có WebStore)
  • Có nhiều khả năng tương tác phần cứng (cổng serial, usb, bluetooth, webcam, mic, loa, âm thanh, …)
  • Vẽ thêm “cánh” (tương tác, tính năng) cho  ”hổ” (các trang web sẵn có)

Hiện tại, viết extension/app cho Chrome là dễ nhất, nhanh nhất và thuận tiện nhất (so với việc viết cho Firefox, IE, Opera)


ECMAScript 6, cải tiến Javascript

ECMAScript 6 (ES6), là cải tiến của JavaScript, sửa các vấn đề “chíu khọ” trong ngôn ngữ JavaScript, cung cấp tính năng mới thuận tiện hơn, dễ bảo trì mã nguồn hơn.

  • thêm class, kế thừa, mixins (lai ghép, tương tự như đa kế thừa trong C++)
  • Hệ thống tải/nạp module (giúp tổ chức mã nguồn gọn gàng, nhanh, dễ quản lý hơn)
  • proxies
  • cải tiến việc gọi hàm bất đồng bộ (asynchronous), vứt bỏ sự rối rắm của các hàm callback

Web Components

Web Components cho ta khả năng thêm tag mới cho trình duyệt, tương tự như những tag gốc sẵn có. VD:

  • Tạo ra thẻ mới (VD mydiv)
  • Tạo style và tính năng cho thẻ đó
  • người dùng khác chỉ cần khai báo thẻ, tương tự như thẻ gốc (div)

Web Components sẽ thay đổi cách viết, sử dụng và phân phối các thư viện JavaScript hiện có theo hướng dễ dàng hơn nhiều.

Tương lai

Các tính năng mới, API mới sẽ được (tự động) đưa vào trình duyệt mới ngày càng nhanh hơn

  • Vì phần lớn các trình duyệt sẽ tự động cập nhật phiên bản mới
  • Với Chrome, cứ 4 tháng là sẽ có một bản mới sẽ được đưa tới 350 triệu người dùng
  • Thị phần của các trình duyệt Webkit đủ lớn, để các trình duyệt khác (như IE, Opera, Firefox) phải chạy theo và đưa tính năng tương đương vào.

Javascript sleep(), will block browser, block setTimeout either

I found this Javascript sleep function here and it works in FF9, Chrome 14 (tested).

function sleep(ms) {
 ms += new Date().getTime();
 while (new Date() < ms){}
}

This function will block browser from doing anything, even setTimeout()
E.g.:

/*BEGIN*/
setTimeout(alert('stupid'), 1000); 
sleep(2000); 
// after sleep completed, setTimeout has its turn to run. 
// The alert() will be shown after 3 seconds from /*BEGIN*/

This might be a stupid thing but sometimes you have to do stupid work and it’s required.

NodeJS quick sum up July 2011

This is my sum up about NodeJS on July 2011, base on some slides (of geeks in my list from BarCamp Saigon 2011). Just a fastfood of what NodeJS is, why is get buzz at the moment.

 

specs

  • JS and C++ code
    + and commonJS module mechanism 
    ——–> on NodeJS binding (http socket IO …)
    ——–>——–> on JS engine V8 + ThreadPool-libIO + EventLoop-libEV + …
  • programming style: evented with callback function, no thread
  • non blocking IO
  • DB support: mongodb couchdb mysql redis
  • package (module of NodeJS) is NPM (not available on Windows?)
  • IDE support: bad, no great debugger, can use cloud9 online IDE
  • hosting: joyent heroku cloudfoundry dotcloud

 

when to use it?

  • chat/messaging
  • real-time applications
  • intelligent proxies
  • high concurrency applications
  • communication hubs
  • coordinators

 

something bad

  • so young, immature
  • lots of stuffs to look at, must lookup API from internet, and remember yourself (function name, parameter, …)
  • retro compatibility, API is (frequently) subject to change
  • hard to find organized (and centralized) and authoritative information

Adding Client-Side Script Blocks with RegisterStartupScript() and RegisterClientScriptBlock()

The System.Web.UI.Page class contains two methods for emitting client-side script code into the HTML rendered by the ASP.NET Web page:

  • RegisterStartupScript(key, script)
  • RegisterClientScriptBlock(key, script)

Both of these methods take two strings as input. The second parameter, script, is the client-side script—including the opening and closing <script> tags—to insert into the page. The first parameter, key, serves as a unique identifier for the inserted client-side script.

The only difference between these two methods is where each one emits the script block. RegisterClientScriptBlock() emits the script block at the beginning of the Web Form (right after the <form runat="server"> tag), while RegisterStartupScript() emits the script block at the end of the Web Form (right before the </form> tag).

From http://msdn.microsoft.com/en-us/library/aa478975.aspx

jQuery animation queue, create DOM element and its properties, ajaxStart and ajaxStop events

animation queue

By default, animations are queued, but you can disable this by setting the queue property to false. Unqueued animations start immediately and subsequent queued animations are not deferred for unqueued animations.

$("img").fadeIn(500)
        .animate({"width":"+=100"},
                 {queue:false, duration:1000})
        .fadeOut(500);
  • The fadeIn() and fadeOut() effects are queued, but the call to animate() (which animates the width property for 1000ms) is not queued.
  • The width animation begins at the same time the fadeIn() effect begins. The fadeOut() effect begins as soon as the fadeIn() effect ends—it does not wait for the width animation to complete.

 

ajaxStart and ajaxStop events

  • When jQuery is not performing any Ajax requests and a new request is initiated, it fires an “ajaxStart” event.
  • If other requests begin before this first one ends, those new requests do not cause a new “ajaxStart” event.
  • The “ajaxStop” event is triggered when the last pending Ajax request is completed and jQuery is no longer performing any network activity.
  • These “ajaxStart” and “ajaxStop” event handlers can be bound to any document element: jQuery triggers them globally rather than on any one particular element.

 

DOM Element creating

You probably already know that you can pass a tagname to $() to create an element of that type, and that you can pass (as a second argument) an object of attributes to be set on the newly created element.

  • This second argument can be any object that you would pass to the attr() method,
  • but in addition, if any of the properties have the same name as the event registration methods, the property value is taken as a handler function and is registered as a handler for the named event type.
  • Similarly, if any of the properties has the name “css”, “val”, “html”, “text”, “data”, “width”, “height”, or “offset”, then the value of that property is passed to the method with the same name as the property.
var image = $("<img>", {
                  src: image_url,
                  alt: image_description,
                  className: "translucent_image",
                  click: function() {$(this).css("opacity", "50%");},
                  css: { border: "dotted red 3px" }
               });
 

Sum up from: http://answers.oreilly.com/topic/2353-5-things-you-might-not-know-about-jquery/

Lập trình ứng dụng Facebook

(FASTFOOD version  – không trau chuốt sửa chữa)

UPDATE:
Lập trình ứng dụng cho Facebook sử dụng Eclipse Galileo – Develop a #Facebook #app with #Eclipse Galileo – Learn the Facebook Connect API
http://su.pr/AckWqo

Viết facebook app bằng .NET (dùng VS2008 và bộ Toolkit nguồn mở): http://www.stevetrefethen.com/wiki/Facebook%20application%20development%20in%20ASP.NET.ashx

Ngày 18/11/2010, Facebook thông báo một tính năng mới cho các lập trình viên.
– Chúng ta đã có thể tạo TestUser để thử nghiệm ứng dụng mà ko phải lo lắng về chuyện bị Facebook coi là spam.
– Các testUser có thể kết bạn với nhau (ko cần accept).
– Khi dùng xong có thể xoá đi.

– TestUser không tương tác với các account thật của Facebook được,và cũng không chuyển đổi thành account thật được.
– Không truy xuất được các nội dung công khai trên các Page (thật, hiện có).

http://mashable.com/2010/11/17/facebook-test-users/

Cần

  • Chuẩn bị kỹ thuật, server
  • Thêm ứng dụng Facebook Developer vào account Facebook của mình, đây là chỗ quản lý và cấu hình các ứng dụng mà bạn phát triển
  • Thiết lập tham số cho ứng dụng mới của bạn
  • Phát triển ứng dụng của bạn
  • Quản lý ứng dụng của bạn
  • Cần có facebook account
  • Cần biết lập trình một ngôn ngữ (dùng để viết) web nào đó, VD như PHP, Ruby on Rails, JavaScript, Python, ASP.NET — Nhất là những nền tảng ngôn ngữ có sẵn thư viện API để viết Facebook app (PHP, ASP.NET).
  • Hiểu biết cơ bản về Internet, SSH, MySQL, và Unix
  • Biết sử dụng Web hosting, có host để xài (để chứa ứng dụng của bạn)
  • Server cần chạy được HTML, tối thiểu một nền tảng lập trình web PHP (có cURL) và/hoặc .NET. Nếu có kết nối CSDL càng tốt
  • Cần cài ứng dụng Developer của Facebook
  • Vào mục này http://www.facebook.com/developers/ , chọn allow (để sử dụng facebook app Developer trong profile của mình)
  • Nhấn “Set Up New Application”. Khai báo, submit.
  • Xem thêm về các trường có thể khai báo tại đây: http://wiki.developers.facebook.com/index.php/Creating_a_Platform_Application

Có 2 thông tin quan trọng cần lưu ý:

  • * API key: chuỗi này là định danh ứng dụng của bạn với Facebook (về sau khi gọi API tới facebook luôn phải đính chuỗi này vào)
  • * Chuỗi bí mật của ứng dụng: Facebook sử dụng key này để xác định ứng dụng nào đang gọi, bạn ko được share key này cho ai khác.
  • Lưu ý, mỗi khi sửa thông tin của App, sẽ mất vài chục phút để update trên các Server của FB.
  • Các trường thông tin cần sửa là:
    • Canvas Page URL (url trên facebook để truy cập ứng dụng của bạn, lúc test bạn sẽ chạy thử từ URL này)
    • Canvas Callback URL (url của ứng dụng, mà bạn host trên site)

Tóm lại

đây là mô hình của ứng dụng trên Facebook: User Facebook Website của bạn (hay ứng dụng của bạn)

Do vậy, bạn nhất thiết phải có một webserver trên mạng (hosting, hoặc server riêng). PHP và MySQL là nên có, dù không bắt buộc.

Một số phần quan trọng để ứng dụng của bạn thực sự trở thành một phần của facebook

  • Kiểu dáng phù hợp http://devtacular.com/articles/bkonrad/how-to-style-an-application-like-facebook/
  • Liệt kê App lên Application Directory
  • Chỉnh sửa các thông tin cơ bản của ứng dụng thật đầy đủ, nhất là trang About của App
  • Canvas Page: là nơi hiển thị chính của ứng dụng, là nơi cho user tương tác với App của bạn
  • Profile Box: ứng dụng của bạn có thể được hiển thị trên trang Profile của user
  • Application Menu: menu nhỏ bên dưới góc phải, tương tự như menu Start của Windows.

Xài FBML hay iframe cho ứng dụng của bạn?

http://wiki.developers.facebook.com/index.php/Choosing_between_an_FBML_or_IFrame_Application

FBML

FBML diagram

  • Dựng trang nhanh dễ, dùng thẻ của facebook
  • Thể hiện các thành tố cơ bản của facebook rất đơn giản (chỉ cần ghi thẻ tương ứng là xong)
  • URL và kiểm tra xác thực user đơn giản

IFrames

Iframe diagram

  • Linh hoạt, thích viết gì thì viết, vì bản chất là User tương tác với trực tiếp với trang nằm trên hosting của mình
  • Chuyển các ứng dụng có sẵn sang dạng Facebook dễ dàng
  • Nhanh hơn khi sử dụng, User view trang không cần qua Proxy của FB để render các thẻ
  • Sử dụng JavaScript, HTML, CSS của mình (xài jquery, blueprint vô tư)
  • Chạy ajax nhanh hơn do user chạy trực tiếp trang của mình (không qua proxy)
  • Debug dễ hơn (vì mã HTML và js là nguyên bản)
  • vẫn chỉnh được kích thước (auto resize), không ngại bị scrollbar (dùng thêm js của facebook trong iframe)

Khuyên dùng

  • nên xài iframe, ko phải tái nạp các thành phần topbar và appbar,chatbar của Facebook, vẫn tận dụng được tốt FBML nếu dùng XFBML.

iframe with XFBML

  • JS của facebook sẽ scan DOM và render lại các thẻ fb trên chính browser, bớt được các vòng roundtrip trên app server của mình
  • trích xuất dc URL trong iframe của mình ra trang facebook container (dùng js của facebook trong iframe của mình)
  • Nếu đang dùng iframe, có thể chuyển trang thành dạng FBML, sử dụng fb_force_mode
  • Có thể dùng HTML, đánh dấu, và dùng javascript lib của Facebook để có khả năng hiển thị tương tự FBML
  • http://wiki.developers.facebook.com/index.php/Using_HTML_to_Imitate_XFBML

Các thành phần cơ bản quan trọng của Facebook App

  • * API, gọi hàm, lấy dữ liệu trả về từ Facebook.
  • * FBML, Facebook Markup Language, ngôn ngữ mô tả của Facebook, khi ứng dụng trả về FBML, đi qua Proxy của Facebook, các thẻ fbml sẽ được render để trả về HTML thực cho User.
  • * XFBML, một mở rộng của FBML, sử dụng javascript để render FBML trên trình duyệt của User, không đi qua proxy.
  • * FQL, Facebook Query Language, lấy dữ liệu sử dụng dạng ngôn ngữ tựa như SQL query, không cần dùng API. Giảm tải lời gọi API, chỉ lấy những gì cần, tránh dùng nhiều round trip (nhiều lần gọi API) để lấy thông tin. (cách dùng tương tự như gọi API vì nó là một hàm API mà, bạn gọi API fql.query với tham số là query của bạn)
    http://developers.facebook.com/news.php?blog=1&story=257
  • * FBJS, Facebook javascript

Facebook Connect

  • biết được user facebook đang ở trên site của bạn
  • đưa bạn bè lên site của bạn
  • xuất bản thông  tin mới từ site lên stream của các bạn facebook đã connect
  • làm cho user comment được thông tin trên site bạn, và hiện cả trên facebook

Di cư ứng dụng web social của bạn lên facebook

Chuyển hết kho user lên facebook account: http://wiki.developers.facebook.com/index.php/Express_Registration

 

Tổng hợp các kiến thức Facebook

http://developers.facebook.com/docs/guides/web/

 

 

  • Chuẩn bị kỹ thuật, server
  • Thêm ứng dụng Facebook Developer vào account Facebook của mình, đây là chỗ quản lý và cấu hình các ứng dụng mà bạn phát triển
  • Thiết lập tham số cho ứng dụng mới của bạn
  • Phát triển ứng dụng của bạn
  • Quản lý ứng dụng của bạn

Sử dụng YUI Compressor với Visual Studio

1. Minified (làm tối thiểu hoá) hay compress các file text. Công việc này thường là: bỏ các dấu xuống dòng, bỏ các dấu cách, dấu tab thừa (mà developer thường dùng trong khi viết mã – cho đẹp).
2. Khi làm web, nếu làm kỹ lưỡng thì tất cả các file JS, CSS đều phải được minified, giảm khá nhiều dung lượng truyền tải. Đôi khi còn phải ghép nhiều file thành 1 file nữa (để giảm số lần request, thay vì lấy 3 file 1.css 2.css 3.css thì chỉ lấy 1 file 123.css thôi, tiết kiệm 2 request)

YUICompressor là công cụ khá tốt (và nổi để làm việc này). Bài viết này hướng dẫn dùng YUICompressor (kèm) với VisualStudio. (Ngắn gọn là cấu  hình VS để nó gọi hộ mình chương trình Java YUICompressor)

Download YUI Compressor từ Yahoo và giải nén (unzip) nó vào thư mục nào đó.

Cấu hình External Tool của Visual Studio

Mở Visual Studio. Chọn (Tools -> External Tools…)

image

Nhấn Add, tạo một tool mới , đặt tên là YUI Compressor.  Nhập các thông số như sau:

Chỉnh lại đường dẫn đến file jar (chỗ mà bạn vừa giải nén YUI Compressor ở bước trước).
Bạn cũng cần phải có khả năng chạy Java trên máy (Cài JRE hoặc JDK rồi, đặt Path đến java.exe rồi java.exe is in your path)

  1. Title: Yui Compressor
  2. Command: java.exe
  3. Arguments: -jar “E:\yuicompressor-2.4.2\build\yuicompressor-2.4.2.jar” $(ItemPath) –charset “UTF8″ –type js -o $(ItemFileName).min$(ItemExt)
  4. Initial Directory: $(ItemDir)
  5. Đánh dấu vào “Use Output Window”

image

Để thử nghiệm, bạn hãy chọn file js trong cửa sổ Solution Explorer.  Sau đó mở menu Tool/Yui Compressor.  Refresh lại thư mục trong Solution Explorer, bạn sẽ thấy các file dạng *.min.js

Bạn hãy làm tương tự để tạo Tool YUI cho các file css, chỉ chú ý là thay đối số –type thành css chứ không phải js khi cấu hình tool (trong ô nhập Argument)

Tạo Toolbar trong VS để làm cho  tiện

Vào menu Tools->Customize.  Nhấn New…

image

Sang tab Command , chọn mục Tools.

image

Kéo thả External Command 1 vào toolbar của bạn.

Hy vọng các bạn dùng .NET thấy hữu ích với kỹ thuật này. Kỹ thuật này có các điểm lợi:

  • Bớt được việc mở commandline, gõ lệnh để chạy YUIC, mất thời gian, tốn công, khó setup, nhất là phải gõ đường dẫn. Giờ chỉ cần click chuột trên toolbar
  • Vẫn dùng nguyên xi code của YUICompressor (Java). Khi YUI nó có thay đổi hay nâng cấp, tải về bản mới là xong.

Bài gốc cho bài viết này đc lấy tại đây:

http://blog.lavablast.com/post/2009/05/YUI-Compressor-for-Visual-Studio.aspx

Cách khác

Nếu bạn cảm thấy ngại cài thêm Java trên máy, đây là một công cụ khác, cũng có chức năng tương đương. Tuy nhiên nếu dùng bản này bạn sẽ không có điểm lợi thứ 2 (trong cách dùng Java YUIC như trên)
http://www.codeplex.com/YUICompressor
Đây là bản code viết bằng .NET, convert từ dự án (viết bằng Java) Yahoo! UI Library’s YUI Compressor. Tác dụng của nó cũng là nén JS và CSS tới mức tối đa mà vẫn đảm bảo hoạt động như bình thường.
Phiên bản này dựa trên YUI Compressor version: 2.4.2 (từ ngày 2009-02-22).

Tính năng chính
* Stock Yui Css compression.
* Stock Yui JavaScript compression.
* MsBuild task which can be used in a Web Deployment Project build.
* The MsBuild task also compiles all compressed files into a single destination file (aka. file combining).
* Can now handle Encoding Types (eg. Unicode) from v1.2.2.0 onwards and ThreadCulture from v1.3.0.0 onwards.

Multi-line JavaScript

I discovered via some random blog post that you can do multi-line JavaScript by escaping the line breaks.

var a = ‘You can start here \
and continue here \
and then finish it up here.’;

The backslash on each line allows you to keep going. It’s a little bit cleaner than opening and closing quotes and a concatenation operator on each line.

http://snook.ca/archives/javascript/multi-line-javascript

Lấy đoạn text đang được user chọn trên trang

Hi all,

Mấy hôm nay thấy dân mạng khoe inh sỏi vụ có cái Tracer của bọn Tynt.com nó cho phép webmaster biết user người ta đang xem gì làm gì chọn gì trên website của mình. Vụ này ý tưởng hay phết, nhưng technical chắc cũng chả có gì ghê gớm (vẫn phục bọn khoai tây về cái vấn đề này, bọn nó ăn học nghĩ, khoai lang như mình thì ăn học làm, ek nghĩ đc cái gì cho dân tình e sợ cả).

Mình draft thử vài cái xem có làm đc không, thì thấy là cũng không khó lắm:

  • Viết đoạn js nhỏ, nhúng vào website. Đoạn js này sẽ làm nhiệm vụ detect xem user đang chọn cái gì rồi gửi lên một cái server nào đó (gọi web API qua URL thôi). Việc này phải làm âm thầm và nhanh, nếu tiện tay gửi kèm luôn cả cookie, url các thể loại cho nó đầy đặn. Có một vướng mắc nho nhỏ là: nếu không handle đc sự kiện kiểu như OnSelection, thì đoạn js này sẽ phải setInterval() để check xem User có chọn gì ko, mà làm vậy là mệt đấy, nặng đấy.
  • API nhận đoạn text kia và dữ liệu liên quan, ghi lại hết vào db.
  • Chú chủ website lúc nào thích thống kê thì mở trang report ra, query vào cái DB kia là xong.

Tính năng nghe có vẻ hay, nhưng đồ là chạy sẽ không nhanh (vì Google Analytics có mỗi chuyện gửi cookie, url đi thôi mà còn chậm, chú này còn phải quét on_selection), vớ vẩn làm chậm trang web, user cằn nhằn rồi chạy mất thì hỏng bánh kẹo.

Anh em ném đá cái nhỉ, xem có đúng ko?

Tham khảo kỹ thuật về lấy đoạn text đang được chọn trên trang:
http://www.codetoad.com/javascript_get_selected_text.asp (ok với IE, FF, chưa test cái khác)
http://laboratorium.0xab.cd/jquery/fieldselection/0.2.3-test/test.html (ok IE, FF, chưa test cái khác)
http://snipplr.com/view/775/getselection/ (IE6, Fx2, Opera9, Safari)

Javascript – JS – Sắp xếp ngẫu nhiên các phần tử trong mảng

Javascript – JS – Sắp xếp ngẫu nhiên các phần tử trong mảng

arrDisplayEntry.sort(function() {return 0.5 - Math.random()}) //Array elements now scrambled

Sample:


<html>
<body>
</body>
<script>
var arrDisplayEntry = [1,2,3,4,5,6,7,8,9,0];
//Array elements now scrambled
arrDisplayEntry.sort(function() {
return 0.5 - Math.random();});
console.log(arrDisplayEntry);
</script>
</html>