Thanh Phúc: CSS

Hiển thị các bài đăng có nhãn CSS. Hiển thị tất cả bài đăng

Thứ Tư, 10 tháng 12, 2014

Tối ưu tốc độ tải trang bằng việc nén các file resources JS và CSS sử dụng Gruntjs

09/06/2013 | Đăng bởi Trần Mạnh | 0 bình luận

Tiếp theo của phần 3 trong series Nhập môn Nodejs trên Hanoijs, chúng ta sẽ tiếp tục tìm hiểu về khái niệm module và việc tổ chức code trong nodejs.

Phần lớn lập trình viên đều quen thuộc với khái niệm tổ chức code trong ứng dụng của mình. Việc tổ chức code 1 cách logic sẽ cho chúng ta khả năng sử dụng lại những code mà ta đã viết. Chúng ta thông thường sẽ tách và nhóm những đoạn code lặp lại hoặc được sử dụng lại một cách thường xuyên thành các function, nhiều function xử lý chung 1 logic nào đó chúng ta lại tổ chức thành các class. Các class và function đó được tổ chức vào các file và đặt vào thư mục như lib hoặc classes... Còn các code thông thường thì có thể sẽ được tổ chức vào thư mục application hoặc một thư mục bất kỳ nào khác tuỳ vào project của chúng ta.
1. Tổ chức và sử dụng lại các hàm chức năng
Khi chúng ta thực hiện một ứng dụng nào đó, của bất kỳ ngôn ngữ nào, thường sẽ có những thời điểm mà code của chúng ta viết tất cả trong 1 file.Điều này sẽ dẫn đến việc rất khó để kiểm soát được code của chúng ta nếu xảy ra lỗi. Vì thế, thay vì tống hết đống code đó trong 1 file, chúng ta hãy xem lại xem những phần code nào có thể tách ra và chuyển chúng sang một file khác.
Đối với 1 số ngôn ngữ thực thi như PHP hay Ruby, chúng ta thường dùng khái niệm include file để tổ chức ứng dụng của chúng ta. Phần lớn việc include có nghĩa là các code xử lý trong file include sẽ thực thi ở phạm vi Global.Điều này có nghĩa là bất kỳ biến hay hàm nào chúng ta khai báo trước đó sẽ có khả năng bị ghi đè (overwrite) bởi code trong các file include đó.
Giả sử với PHP, ứng dụng của bạn có một phương thức thực hiện việc đổi tỷ giá đồng USD như sau:

function changeVNDToUSD($number, $rate = 20000) {
  $number = (int) $number;

  if ($rate > 0)
     return round($number / $rate, 2);
  else return 0;
}

include 'currency_helper.php';

Sau đó bạn include 1 file giả sử là currency_helper.php ngay dưới phương thức changeVNDToUSD mà trong file currency_helper.php bạn lại khái báo 1 phương thức cũng tên changeVNDToUSD, bạn sẽ nhận được lỗi: Fatal error: Cannot redeclare changeVNDToUSD.
Để tránh điều này, trong PHP chúng ta có thể dùng namespaces, với Ruby là modules. Đối với Nodejs, nó cung cấp cho chúng ta hệ thống module cực kỳ mạnh mẽ, ta có thể tách code và require code mà không lo bị xung đột với các code mà ta đã viết trước đó. Một khi muốn sử dụng 1 phương thức hay một đoạn code nào đó ở phạm vi Global, chúng ta cần phải thông qua đối tượng là exports hoặc module.exports. Và đây chính là cách mà chúng ta tạo module trong nodejs.
2. Tạo module trong nodejs
currency_helper.js

var df_rate = 20000;

function changeVNDToUSD(number, rate) {
  var rate = rate || df_rate;
  if (rate > 0)
     return Math.round(number / rate, 2);
  else return 0;
}

exports.changeVNDToUSD = changeVNDToUSD;
// C2: module.exports = changeVNDToUSD;

app.js

var currency = require('./currency_helper'); // File currency_helper.js cùng thư mục với app.js
console.log(currency.changeVNDToUSD(200000)); // $10
// C2: console.log(currency(200000)); // $10

Hãy chú ý đến phần comment ở cuối file currency_helper.js, nếu chúng ta sử dụng exports.changeVNDToUSD = changeVNDToUSD thì ở fileapp.js chúng ta phải gọi phương thức thông qua đối tượng currency là currency.changeVNDToUSD. Còn nếu chúng ta sử dụng C2, gán trực tiếp phương thức changeVNDToUSD với đối tượng module.exports thì ở file app.js ta sẽ gọi trực tiếp phương thức khi require: currency(200000). Ngoài ra chúng ta có thể sử dụng phương thức changeVNDToUSD một lần bằng cách require('./currency_helper.js').changeVNDToUSD(200000) mà không cần phải khai báo.
3. Exports nhiều phương thức
Như đã đề cập ở trên, trong nodejs chỉ những phương thức nào được gán với đối tượng exports thì chúng ta mới có thể sử dụng được ở các module khác. Các phương thức khác trong cùng file sẽ được coi là các private method
currency_helper.js

var df_usd_rate = 20000;
var df_eu_rate = 40000;

function changeVNDToUSD(number, rate) {
  var rate = rate || df_usd_rate;
  if (rate > 0)
     return Math.round(number / rate, 2);
  else return 0;
}

function changeVNDToEU(number, rate) {
  var rate = rate || df_eu_rate;
  if (rate > 0)
     return Math.round(number / rate, 2);
  else return 0;
}

function changeUSDToVND(number, rate) {
  var rate = rate || df_eu_rate;
  return Math.round(number * rate, 2);
}

exports.changeVNDToUSD = changeVNDToUSD;
exports.changeVNDToEU = changeVNDToEU;

Giả sử trong file currency_helper.js ta có 3 phương thức như trên. Nếu ta chỉ exports 2 phương thức là changeVNDToUSD và changeVNDToEU thìở các module khác ta chỉ có thể sử dụng 2 phương thức này, còn phương thức changeUSDToVND là phương thức private của currency_helper.js
app.js

var currency = require('./currency_helper'); // Lưu ý là k cần phần mở rộng .js
console.log(currency.changeVNDToUSD(1200000)); // $60
console.log(currency.changeVNDToEU(1200000)); // 30 euro
console.log(currency.changeUSDToVND(20)); // TypeError: Object #<Object> has no method 'changeUSDToVND'

Như vậy là đến thời điểm này, chúng ta đã có thể hiểu được cách tổ chức, phân tách code sử dụng module trong node, cách tạo 1 module và require module của ta trong các module khác. Nhưng nếu chỉ có thế thì làm sao nói hệ thống module trong node là mạnh mẽ được? Nếu bạn còn nghi ngờ điều này, xin chào mừng bạn đến với thế giới của module trong node: NPM
4. NPM: Thế giới của các module
Nghe giới thiệu có vẻ mỹ miều thế nhưng thực ra npm là 1 package manager của Node. Ta có thể sử dụng nó để cài cắm các module package khác của tất cả mọi lập trình viên trên thế giới mà đã được publish trên NPM. Hoặc chúng ta cũng có thể publish những module package mà chính ta viết cho cộng đồng sử dụng.
Cài đặt 1 npm module
Trong /Desktop/my_project
Mở terminal (Với Windows bạn có thể sử dụng PowerShell) và gõ lệnh sau:

$npm install request

NPM sẽ thực hiện tìm kiếm và nếu tìm thấy nó sẽ download về thư mục node_modules trong my_project cho chúng ta. Trong trường hợp này npm sẽ clone 1github repo từ https://github.com/mikeal/request
request module sẽ được đặt trong /Desktop/my_project/node_modules/request
Trong file /Desktop/my_project/app.js, ta sẽ load module request vào bằng dòng code sau:

var request = require('request');

Lưu ý là trong require, chúng ta chỉ cần đặt tên giống với tên thư mục trong node_modules là được.
Ta có thể cài đặt 1 module ở phạm vi global bằng cách thêm tham số -g đằng sau lệnh npm install

$npm install coffee-script -g

Tuy nhiên, những module là global thì ta không thể require chúng trong ứng dụng của chúng ta. Hãy lưu ý đến phần này.
Ngoài cách cài đặt từng module sử dụng lệnh npm install chúng ta còn có 1 cách khác cũng rất tiện lợi đó là định nghĩa các module cần thiết cho ứng dụng của chúng ta trong file package.json

{
    "name": "My App",
    "version": "1",
    "dependencies": {
       "connect": "1.8.7",
       "request": "lastest"
    }
}

Lưu ý là file package.json cần phải được đặt ở root của ứng dụng của chúng ta. Thực hiện cài đặt các npm module bằng lệnh npm install. Npm sẽ tự động đọc file json và tải về các gói đã được định nghĩa trong file.
Tổng kết
Chúng ta đã đi qua 4 phần của series về Nodejs trên hanoijs. Nếu bạn vẫn chưa đọc các phần khác của series thì truy cập vào Nhập môn Nodejs để theo dõi. Tuy mọi thứ từ lúc bắt đầu đến giờ vẫn chỉ là những khái niệm ở mức low level nhưng hanoijs hy vọng bạn đã có 1 cái nhìn cơ bản nhất về các nội dung trên nodejs. Phần tiếp theo của series, hanoijs sẽ cùng các bạn tìm hiểu 1 web framework chạy trên node có tên là Expressjs. Happy coding!!

Sưu tầm: http://hanoijs.org/bai-viet/blog/toi-uu-toc-do-tai-trang-bang-viec-nen-cac-file-resources-js-va-css-su-dung-gruntjs/37

Thứ Ba, 20 tháng 5, 2014

Less Css

Thủ thuật CSS (6/7): LESS CSS Hướng dẫn cơ bản cho người bắt đầu

Css thì rất đơn giản và dễ dàng để học, tuy nhiên nó lại có một giới hạn nhất định. Đặc biệt là khi bạn phải điều chỉnh lại nó. Bạn hãy tưởng tượng xem , khi bạn có hàng ngàn dòng css mà cần phải thay đổi một cái gì đó thì thật là mệt mỏi phải không ?

Tuy nhiện một công nghệ mới đã ra đời giúp bạn giải quyết việc này , đó là LESS. Với LESS bạn có thể viết các câu lệnh css dạng động, tức là có khai báo biến, có khai báo hàm…. Có lẽ đọc tới đây các bạn vẫn còn mơ hồ, vậy chúng ta cùng khám phá chi tiết về LESS nhé.

1 Cách sử dụng LESS

Sử dụng LESS thì rất là đơn giản, chúng ta chỉ cần đặt 2 dòng này vào bên trong thẻ

là okie. Nhưng điều đầu tiên là các bạn phải download
less.js về máy của mình.

1

2

              
                <link
                
                rel="stylesheet/less"
                
                type="text/css"
                
                href="style.less">

              
                <script
                
                src="less.js"
                
                type="text/javascript">script>

Phải chắc chắn rằng file .less được đặt trước less.js.

2 Cú pháp của LESS

Không giống như CSS thông thường, LESS hoạt động như một ngôn ngữ lập trình, nó cũng có khai báo biến, toán tử…

Khai Báo Biến (Variables)
Trước hết chúng ta cùng xem lại cách mà chúng ta viết câu lệnh CSS bình thường.

              
                background-color:
                
                #2d5e8b;

}

              
                background-color:
                
                #fff;

}

}

Và đây là cách mà LESS làm tương tự :

              
                @color-base: 
                #2d5e8b;

              
                background-color:
                @color-base;

}

              
                background-color:
                
                #fff;

              
                color:
                @color-base;

}

              
                border:
                
                1px 
                solid 
                @color-base;

}

Chúng ta dễ dàng nhận thấy LESS khai báo biến @color-base: #2d5e8b; là màu dùng chung cho cả 3 lớp (class). Và với kiểu khai báo thế này, thì chỉ mỗi khi bạn sử dụng , chỉ cần gọi lại biến @color-base, đồng thời sau này nếu bạn muốn đổi màu thì chỉ cần thay đổi màu tại biến @color-base. Thật tiện lợi và dễ điều chỉnh phải không các bạn.

3 Mixins

Mixins cho phép gắn toàn bộ thuộc tính của một class trong CSS vào trong class khác bằng một cách khá đơn giản là thêm tên class này như một thuộc tính của class kia. Để hiểu rõ hơn thì chúng ta cùng xem ví dụ sau :
Giả sử chúng ta khai báo một lớp (class) dùng cho hiển thị màu gradient như sau :

              
                .gradients {
              

              
                background:
                
                #eaeaea;

              
                background:
                linear-gradient(top,
                
                #eaeaea,
                
                #cccccc);

              
                background:
                -o-linear-gradient(top,
                
                #eaeaea,
                
                #cccccc);

              
                background:
                -ms-linear-gradient(top,
                
                #eaeaea,
                
                #cccccc);

              
                background:
                -moz-linear-gradient(top,
                
                #eaeaea,
                
                #cccccc);

              
                background:
                -webkit-linear-gradient(top,
                
                #eaeaea,
                
                #cccccc);

}

Và khi bạn muốn áp dụng màu gradient này vào bất cứ khai báo nào khác , thì chỉ cần đặt .gradientsvào ngay bên trong là được :

1

2

3

4

5

              
                div {
              

              
                .gradients;
              

              
                border-radius: 
                3px;

}

Đoạn css trên tương đương với cách mà chúng ta viết CSS thường ngày thế này :

              
                div {
              

              
                background:
                
                #eaeaea;

              
                background:
                linear-gradient(top,
                
                #eaeaea,
                
                #cccccc);

              
                background:
                -o-linear-gradient(top,
                
                #eaeaea,
                
                #cccccc);

              
                background:
                -ms-linear-gradient(top,
                
                #eaeaea,
                
                #cccccc);

              
                background:
                -moz-linear-gradient(top,
                
                #eaeaea,
                
                #cccccc);

              
                background:
                -webkit-linear-gradient(top,
                
                #eaeaea,
                
                #cccccc);

              
                border-radius: 
                3px;

}

Với việc sử dụng thế này, LESS sẽ giúp file css của bạn ngắn gọn và dễ hiểu hơn rất nhiều. Ngoài ra bạn cũng có thể đặt tham số khi sử dụng LESS.

              
                / LESS
              

              
                .rounded-corners (@radius: 
                5px)
                {
              

              
                border-radius: @radius;
              

              
                -webkit-border-radius: @radius;
              

              
                -moz-border-radius: @radius;
              

}

              
                #header {
              

              
                .rounded-corners;
              

}

              
                #footer {
              

              
                .rounded-corners(10px);
              

}

Đoạn css trên tương đương với cách viết sau :

              
                #header {
              

              
                border-radius: 
                5px;

              
                -webkit-border-radius: 
                5px;

              
                -moz-border-radius: 
                5px;

}

              
                #footer {
              

              
                border-radius: 
                10px;

              
                -webkit-border-radius: 
                10px;

              
                -moz-border-radius: 
                10px;

}

4 Nested Rules
Thay vì viết các tên selector dài để chỉ ra các quan hệ thừa kế trong CSS, với Less bạn có thể lồng các selector và nhau. Việc này làm cho quan hệ thừa kế trở nên rõ ràng hơn và code stylesheet cũng ngắn gọn hơn. Chúng ta cùng xét ví dụ sau :

              
                nav {
              

              
                background:
                
                #455868;

              
                border-bottom:
                
                2px 
                solid 
                #283744;

}

              
                nav li {
              

}

              
                nav li a {
              

              
                line-height:
                
                40px;

              
                text-shadow:
                
                1px 
                1px 
                0px 
                #283744;
              

}

Trong cách viết CSS thông thường này, để áp đặt thuộc tính cho các phần tử con, bạn phải chỉ định phần tử cha đứng trước nó, nhưng với LESS, thì việc này đơn giản và rõ ràng hơn nhiều :

              
                nav {
              

              
                background:
                
                #455868;

              
                border-bottom:
                
                2px 
                solid 
                #283744;

              
                li {
              

a {

              
                line-height:
                
                40px;

              
                text-shadow:
                
                1px 
                1px 
                0px 
                #283744;
              

}

}

}

Ngoài ra bạn còn có thể ấn định pseudo-classes, như :hover, vào selector bằng cách sử dụng kí tự ( &). Các bạn có thể tham khảo đoạn css sau :

a {

              
                line-height:
                
                40px;

              
                text-shadow:
                
                1px 
                1px 
                0px 
                #283744;
              

              
                &:hover {
              

              
                background-color:
                
                #000;

}

}

5 Operation (Toán tử)

Với LESS bạn có thể thực hiện các phép tính như cộng , trừ , nhân chia. Cùng xem ví dụ sau nhé :

1

2

3

4

5

6

7

              
                .element-A {
              

              
                height:
                @height;

}

              
                .element-B {
              

}

Như bạn đã thấy ở đoạn css trên, đầu tiên chúng ta lưu trữ giá trị biến @height, và rồi ấn định giá trị này cho lớp element A. Và khi đến lớp element B, chúng ta sử dụng biến @height một lần nữa, nhưng lần này giá trị của nó đã được nhân đôi.

6 Scope
LESS cũng cung cấp thêm một khái niệm là Scope, nơi mà biến sẽ được thừa hưởng trong phạm vi gần nó nhất. Để dễ hiểu hơn , chúng ta cùng xem ví dụ sau :

              
                header {
              

              
                background-color:
                @color;

              
                nav {
              

              
                background-color:
                @color;

a {

              
                color:
                @color;

}

}

}

Trong ví dụ trên, header sẽ có màu background là màu đen, trong khi màu nav là màu xanh da trời, và màu của a cũng là màu xanh da trời.

LESS chỉ là một trong số những giải pháp của CSS pre-processor, bạn có thể sử dụng SASS hoặc Stylus. Mình hy vọng là với bài viết này, các bạn sẽ có thêm một kiến thức mới về cách sử dụng CSS cho những trang web hay blog của mình