Categories
Javascript

Typescript và những vùng đất mới

typescript

Thế là đã hết tuần đầu tiên của 2017, mọi người đã học được gì mới chưa? Giờ rãnh rỗi mới dành chút thời gian viết về Typescript, một thứ “ngôn ngữ” mới đã tranh thủ học được trong mấy ngày qua và chia sẻ một số góc nhìn cá nhân về Typescript. Đây cũng là bài khai trương năm 2017, hy vọng cả năm thăng hoa với nghiệp code và tổ nghiệp phù hộ làm ăn phát đạt.

Categories
Javascript Web Programming

Hội thảo: Heavy Web Optimization – Front-end

hoi-thao-heavy-web-optimization--front-end

Trước tiên cũng hy vọng các bằng hữu thông cảm là dạo này công việc nhiều quá nên không có nhiều thời gian viết bài chia sẻ trên blog, nay mình viết bài này thông báo đến các bạn, những web developer, bloghoctap sẽ tổ chức buổi hội thảo dành cho giới web developer, nối tiếp các hội thảo của bloghoctap trước đây.

Khi được hỏi làm sao cho website nhanh hơn, hầu như sẽ nghe câu trả lời là “…nâng cấp server..”. Đôi khi nâng cấp chưa phải là giải pháp tốt vì nó không được kinh tế lắm, điều đầu tiên bạn cần nghĩ tới để tăng tốc website có thể là tối ưu cho trang web của mình. Nối tiếp với buổi Hội thảo giới thiệu về PHP Debugger, Profiler, lần này, mình sẽ trình bày về tối ưu phía client (Front-end) sao cho hiệu quả, đảm bảo nhu cầu về tiết kiệm và tốc độ nhằm giúp trang web load nhanh hơn và triển khai cũng không phức tạp nhiều.

Categories
Javascript Web Design Web Programming

Javascript và những điều cần biết

javascript-fundamental-banner

Nếu bạn là 1 Web Developer, thì hẳn các bạn cũng đã từng Code Javascript ít nhất 1 lần. Javascript chính là nhân tố sống còn trong các thiết kế web hiện nay bởi nó giúp cho cái web khô khan của chúng ta trở nên mượt mà và vận hành trơn tru hơn.

Hôm nay mình sẽ chia sẽ tới các bạn một số kinh nghiệm cũng như 1 số lời khuyên khi các bạn viết Javascript. Phạm vi bài này sẽ không phải hướng dẫn các bạn code Javascript mà nó sẽ giúp các bạn có 1 cái nhìn toàn diện hơn về các vấn đề mà 1 Coder cần quan tâm khi làm việc với Javascript.

Các vấn đề mình sẽ đề cập tới là:
1.Tại sao phải là Javascript?
2.Sử dụng Javascript IDE nào?
3.Minified Code là gì?
4.Obfuscated Code là gì?
5.Tại sao phải học thêm jQuery?

Categories
Javascript Web Programming

Detect scrolling bottom của thẻ DIV

detect-scrolling-to-bottom-of-a-div-banner

Đang triển khai cái dzụ Scrolling Ajax, tính kiếm cái plugin nào xài thử thì chẳng thấy cái nào tốt và phù hợp ý mình cả, thôi thì tự sướng. Scrolling Ajax là cái chức năng dàn trang cao cấp mà bạn không cần phải nhấn link để sang trang khác, chỉ việc dùng thanh cuộn, kéo xuống hết thì nó sẽ tự động load tiếp nội dung của trang sau (sử dụng Ajax). Sau 1 hồi phân tích thì cái khó nhất của vụ án Scrolling Ajax không phải là load ajax mà là…làm sao biết đang ở cuối trang.

Categories
Javascript PHP Web Programming

Tự động chuyển trang – Auto Redirect cho website

tu-dong-chuyen-trang-auto-redirect-banner

Hôm nay mình sẽ chia sẽ các bạn một chút kinh nghiệm trong vấn đề giải quyết việc tự động chuyển trang (Auto Redirect) đang xem tới 1 địa chỉ (URL) mà ứng dụng bạn muốn chuyển tới. Case Study ở đây là website của bạn bằng cách nào đó xử lý xong xuôi tại trang A và bây giờ bạn muốn tự động chuyển tới 1 trang B nào đó. Trang B có thể là 1 webpage của website của bạn hoặc một website khác.

Để giải quyết được vấn đề này hiện tại có 3 hướng giải quyết chính:
1.Sử dụng HTTP Status Code 301 (hoặc 302)
2.Sử dụng thẻ META của HTML
3.Sử dụng cơ chế Timeout của Javascript.

Categories
Javascript

location.href không làm việc trên IE6!

ie-suck-banner

Vừa mới giải quyết xong một vấn đề tưởng chừng như đơn giản trong javascript nhưng cực kỳ đáng ghét đối với thằng IE6 – đó là chức năng redirect sử dụng location.href.

Categories
Javascript Web Design

Tạo box HTML có góc bo tròn với Curvy Corners

Hôm nay mình chia sẽ với các bạn một thư viện khá hiệu quả trong việc thiết kế giao diện cho website trong trường hợp bạn muốn tạo các box có góc bo tròn, nhưng không sử dụng image, đó là sử dụng 1 plugin của jquery, đó là curvy Corner.

Thư viện này có chức năng cũng tương đối hoành tráng, dung lượng đã minify là 27KB, nếu gzip chắc sẽ khoảng 15kB thôi. Còn chức năng cơ bản thì bo tròn các box bạn muốn.

curvycorner

Categories
Flash Javascript Web Design Web Programming

Upload nhiều File 1 lúc với Swfupload.org

logo-swfupload

Hôm nay mình muốn chia sẽ với các bạn làm web một công cụ khá hay để upload nhiều file cùng một lúc, không cần phải refresh trang, có thể gọi callback trong javascript để xử lý(giống như AJAX).

Chi tiết:
– Front-end: Javascript, Flash
– Back-end: bạn có thể sử dụng ngôn ngữ nào cũng được vì giao tiếp client-server theo hình thức POST, chỉ cần phía server bạn xử lý là ok.

Đây là một công cụ khá hay và không thể thiếu trong bộ sưu tập đồ nghề làm web của bạn.
Website: http://www.swfupload.org/
Demo: http://demo.swfupload.org

Categories
Javascript Miscellaneous Web Programming

Bảng tra các ký tự HTML đặc biệt – HTML Character Entities Cheat Sheet

Bảng các ký tự HTML này cơ bản là dành cho những người làm web họ nhập nội dung, nếu trong HTML Editor họ chỉ cần gõ theo các cụm (VD: © hoặc © là họ có ký tự  Copyright ©…)

Tuy nhiên, có lẽ đã nhiều lần bạn lang thang trên internet, thấy một số bài viết, câu chat có các ký tự đặc biệt và bạn nghĩ chắc là họ phải có công cụ đặc biệt nào đó để gõ hoặc thêm vào nội dung trang web. Vậy, nếu bạn không phải là người làm web mà chỉ là người dùng thường thì làm sao chèn mí cái cụm mã kia chứ, giải pháp rất là đơn giản.

Chỉ dành cho ký tự đặc biệt có số < 256 mà thôi T_T. Bạn chỉ cần giữ phím Alt và nhấn các số ở phía dưới ký tự bạn muốn thêm, sau khi nhấn xong, thả nút ALT ra thì tự nhiên nó sẽ xuất hiện ký tự đó thôi à.

Lưu ý:

1.Các số bạn phải nhấn các chữ  số ở khu vực bàn phím số (Numpad) -> Xem hình

Keyboard Numpad - high light
Keyboard Numpad - high light

2. Nếu ký tự đó chỉ có 2, hoặc 3 chữ số thì bạn phải thêm số 0 vào ở đầu sao cho đủ 4 chữ số. VD ký tự copyright ở trên là số 169, thì bạn phải giữ phím ALT và nhấn lần lượt các số 0,1,6,9 rồi thả phím ALT thì sẽ xuất hiện ký tự ©.

——–
Chúc mọi người có thể làm cho nội dung của mình thêm nhiều ký tự đặc biệt.

——

Bảng các ký tự HTML:
Cac ky tu dac biet - HTML Entities Cheat Sheet

Categories
Javascript

Vấn đề hàm String.replace() của javascript chỉ replace một lần mà thôi.

Tình cờ phát hiện hàm String.replace() của javascript chỉ replace lần xuất hiện đầu tiên mà thôi. Ví dụ:

var myString = 'my blog of my friend here';

alert(myString.replace('my', 'his')); //output : "his blog of my friend here" . Not "his blog of his friend here".

xem ví dụ cũng đã hiểu, phrase “my” chỉ bị thay thế một lần mà thôi, hix hix..điều này đôi khi bạnkhông muốn vì đã replace thì replace cho hết luôn chứ (ví dụ như hàm str_replace() của PHP sẽ thay thế toàn bộ)

– Để giải quyết vấn đề này trước mắt mình thấy có 2 cách, cách hay sử dụng nhất là sử dụng regex pattern thay cho search string, mình sửa lại như sau thì sẽ có kết quả như ý muốn:

alert(myString.replace(/my/g, 'his')); //output : "his blog of his friend here".

Trong nhiều trường hợp mình không dùng cách sử dụng pattern được, thì có một giải pháp khác, đó là add thêm hàm replaceAll vào String object để sau này dùng. Cái hàm này chôm của một kiếm khách nào đó trên giang hồ. Cách này nên sử dụng cẩn thận, vì có thể sẽ bị infinitive loop nếu dùng không cẩn thận.

Prototype của nó như sau:

// Replaces all instances of the given substring.
String.prototype.replaceAll = function(
strTarget, // The substring you want to replace
strSubString // The string you want to replace in.
){
var strText = this;
var intIndexOfMatch = strText.indexOf( strTarget );

// Keep looping while an instance of the target string
// still exists in the string.
while (intIndexOfMatch != -1){
// Relace out the current instance.
strText = strText.replace( strTarget, strSubString )

// Get the index of any next matching substring.
intIndexOfMatch = strText.indexOf( strTarget );
}

// Return the updated string with ALL the target strings
// replaced out with the new substring.
return( strText );
}

Sau khi khai báo prototype này, thì bạn chỉ cần sử dụng như sau

alert(myString.replaceAll('my', 'his')); //output : "his blog of his friend here".

———-

Hy vọng chút ít kinh nghiệm sẽ giúp các bạn trong tương lai.