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.
Advertisements

CSS: inline-block for IE7

I was developing a DemoSite and have problem with IE7 (actually we’re only target IE8, but one of our module must run in IE8 emulate IE7 mode so a meta tag <meta http-equiv=”X-UA-Compatible” content=”IE=EmulateIE7″ /> is put in the header). While Firefox is my primary browser and it’s OK with display: inline-block CSS style, BUT IE7 (and IE8EmulateIE7) does not render it.

So this is the hack for IE7 (from http://grasshopperpebbles.com/css/css-inline-block-ie7-hack/):

HTML

<div class="predefinedList">
<div class="predefinedListItem">Cross country skiing</div>
<div class="predefinedListItem">Fine cuisine</div>
<div class="predefinedListItem">Spa</div>
</div>

Put your style settings to the top,
put display: inline-block;zoom:1;*display:inline; to the bottom.

CSS

.predefinedList .predefinedListItem {    padding:0;    /* other the styles should be here */
    display:inline-block;   /* for firefox */
    zoom: 1;    /* for IE7 hack */
    *display:inline;   /* for IE7 hack */
}

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.