Hướng Dẫn Nginx #1: Các Khái Niệm Cơ Bản
Bài hướng dẫn này gồm có 3 phần: Các khái niệm cơ bản: Tìm hiểu sự khác nhau của directive và context, mô hình kế thừa và cách mà nginx chọn các khối và vị trí máy chủ….
Read More »Mixin Để Chuyển Từ Đơn Vị px Qua em Trong Less
Mixin để chuyển từ đơn vị px qua em trong Less, ta viết như sau
1 2 3 | .px2em(@selector, @target, @context = 16px) { @{selector}: (@target / @context) + 0em; } |
Ứng với: @selector: là thuộc tính cần áp dụng, ví dụ (font-size, margin-top…) @target: là giá trị px cần chuyển đổi sang…
Read More »Flexbox Boilerplate Phiên Bản Less
Chia sẻ Flexbox Boilerplate phiên bản Less
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 | // -------------------------------------------------- // Flexbox LESS mixins // The spec: http://www.w3.org/TR/css3-flexbox // -------------------------------------------------- // Flexbox display // flex or inline-flex .flex-display(@display: flex) { display: ~"-webkit-@{display}"; display: ~"-ms-@{display}box"; // IE10 uses -ms-flexbox display: ~"-ms-@{display}"; // IE11 display: @display; } // The 'flex' shorthand // - applies to: flex items // <positive-number>, initial, auto, or none .flex(@columns: initial) { -webkit-flex: @columns; -ms-flex: @columns; flex: @columns; } // Flex Flow Direction // - applies to: flex containers // row | row-reverse | column | column-reverse .flex-direction(@direction: row) { -webkit-flex-direction: @direction; -ms-flex-direction: @direction; flex-direction: @direction; } // Flex Line Wrapping // - applies to: flex containers // nowrap | wrap | wrap-reverse .flex-wrap(@wrap: nowrap) { -webkit-flex-wrap: @wrap; -ms-flex-wrap: @wrap; flex-wrap: @wrap; } // Flex Direction and Wrap // - applies to: flex containers // <flex-direction> || <flex-wrap> .flex-flow(@flow) { -webkit-flex-flow: @flow; -ms-flex-flow: @flow; flex-flow: @flow; } // Display Order // - applies to: flex items // <integer> .flex-order(@order: 0) { -webkit-order: @order; -ms-order: @order; order: @order; } // Flex grow factor // - applies to: flex items // <number> .flex-grow(@grow: 0) { -webkit-flex-grow: @grow; -ms-flex-grow: @grow; flex-grow: @grow; } // Flex shrink // - applies to: flex item shrink factor // <number> .flex-shrink(@shrink: 1) { -webkit-flex-shrink: @shrink; -ms-flex-shrink: @shrink; flex-shrink: @shrink; } // Flex basis // - the initial main size of the flex item // - applies to: flex items // <width> .flex-basis(@width: auto) { -webkit-flex-basis: @width; -ms-flex-basis: @width; flex-basis: @width; } // Axis Alignment // - applies to: flex containers // flex-start | flex-end | center | space-between | space-around .justify-content(@justify: flex-start) { -webkit-justify-content: @justify; -ms-justify-content: @justify; justify-content: @justify; } // Packing Flex Lines // - applies to: multi-line flex containers // flex-start | flex-end | center | space-between | space-around | stretch .align-content(@align: stretch) { -webkit-align-content: @align; -ms-align-content: @align; align-content: @align; } // Cross-axis Alignment // - applies to: flex containers // flex-start | flex-end | center | baseline | stretch .align-items(@align: stretch) { -webkit-align-items: @align; -ms-align-items: @align; align-items: @align; } // Cross-axis Alignment // - applies to: flex items // auto | flex-start | flex-end | center | baseline | stretch .align-self(@align: auto) { -webkit-align-self: @align; -ms-align-self: @align; align-self: @align; } |
Cách Tính Chiều Rộng Của Flex Item
Giả sử có 1 ví dụ sau: 1 flex container có chiều rộng 900px, và các thông số flex-item như hình dưới Để tính chiều rộng của các flex-item, gồm các bước sau đây: Tìm khoảng trống còn…
Read More »Exec Mode Cluster Trong PM2 Khi Sử Dụng Express, Socket IO
Hiện tại khi các bạn sài PM2 để chạy các ứng dụng NodeJS của bạn, PM2 cho phép bạn tạo ra cái ứng dụng cho phép cân bằng tải bằng cách tạo ra nhiều cluster theo số lượng…
Read More »Go – Tìm Hiểu Về Template
Lý do mình muốn chuyển qua học Golang là về tốc độ xử lý đa luồng thay cho nodeJS, về tốc độ thì các bạn có thể xem các thống kê so sánh, điều mình thích ở Golang…
Read More »Điểm Khác Biệt Giữa Mixins, Extends Và Placeholders Trong SASS
Điểm khác biệt giữa Mixins, Extends và Placeholders, chỉ gói gọn trong cách hiện thị mã css lúc được render ra. Bạn xem các ví dụ ở bên dưới Mixins: (@minxin) – Khai báo: @mixin mixin_name – Sử…
Read More »Redis Là Gì ? Cài Đặt Sử Dụng Như Thế Nào
1. Redis là gì: Redis hay còn gọi là bộ lưu trữ khóa – giá trị và được lưu trữ trên RAM. Thường được xem như hệ cơ sở dữ liệu noSQL. 2. Cài đặt: Có nhiều cách để…
Read More »Bắt Lỗi Trong Redux-Saga
Khi sử dụng redux-saga thì cơ chế bắt lỗi của nó thông qua khối try catch ở hàm cha và được chia làm 3 loại: Khi hàm cha có gọi nhiều effect hoặc hàm con block (call effect)…
Read More »